React 에서 Server State 효과적으로 관리하기

짜잔~ 정답은 React Query 였습니다~

해당 시리즈에서는 React 에서 Server State 를 효과적으로 관리해주는 React Query 를 활용하는 내용을 담고 있습니다 😄

React Query ( Tanstack Query ) 는 무엇인가

React Query 는 react 에서 server state 를 전문적으로 관리해주는 라이브러리입니다. 서버상태를 불러오고 캐싱하며 지속적으로 동기화하고 refetch 하는 작업을 도와주어, 제공하는 다양한 기능을 사용하면 번잡한 작업 없이 핵심 로직에만 집중할 수 있습니다.

Server State 란?

state 는 크게 Client State 와 Server State 로 나뉩니다.

Client State 는 client 상에서 초기화하고 관리하는 state 입니다. 특정 유저만을 위한 state 이며, 다른 유저와 공유하지 않고 client 내에서 UI/UX 흐름이나 사용자 인터랙션에 따라 변할 수 있습니다.

Server State 는 client 가 아닌 server 와 같이 원격의 공간에서 관리되고 유지되는 state 입니다. 서버에서 저장된 데이터이지만 client 에서 보여주기 위한 데이터이며 다른 사람들과 공유되는 state 로 데이터가 다른 유저들에 의해 수시로 변할 수 있습니다.