ui와 server state

2024.11.08

1. tanstack query의 효용

server state에 대한 관리 책임에서 리액트 컴포넌트가 일정부분 해방된다.

기본적으로 state의 관리 책임은 리액트 컴포넌트가 가지고 있다고 생각한다. 만약 외부의 data를 fetching해서 보여줘야하는 컴포넌트라면 응당 해당 컴포넌트가 언제 어떻게 data를 불러올지도 결정할 수 있다.

그러나 컴포넌트는 server state에 대한 책임뿐만 아니라 사용자의 인터랙션 등으로 일어나는 client state, 그에 따른 렌더링에 대한 책임도 같이 지고 있다.

따라서 server state가 바뀌면 컴포넌트의 재렌더링되면서 client state와 ui에 영향을 준다. client state가 바뀌어도 컴포넌트가 재렌더링되면서 server state에 영향을 줄 수 있다.

이걸 한 컴포넌트 안에서 동시에 관리하기 위해서는 많은 관리 포인트들이 생길 수밖에 없다.

server state가 바뀌는 걸 언제 알아야하는가? 어느 기간 동안 캐싱을 할 것인가? 언제 무효화할 것인가? 같은 것들 말이다.

레거시 소스에서는 한 번 호출하면 다시 호출하지 않도록 flag 값을 주는 경우도 봤고, max-age값으로 직접 조정하거나 하는 경우를 봤다.

하지만 이런 구현은 server state를 다루는 컴포넌트에서 동일하게 겪고 있는 문제들이다. react query는 이런 컴포넌트들의 공통적인 문제를 해결해주고 있다.