Client State vs Server State
Client State란 클라이언트가 자체적으로 생성한 상태로 사용자의 input 값이나 UI 변경을 담당하는 부분으로 볼 수 있습니다. 예를 들어, 모달창을 열고 닫는 상태나 사용자가 입력한 값 같은 것들을 의미합니다.
즉, 서버에서 일어나는 일과는 아무 관련이 없는 상태들을 의미합니다.
반면 Server State란 클라이언트에 표시하는 데 필요한 서버 데이터를 의미합니다. 예를 들어, DB에 존재하는 데이터들을 의미합니다.
React Query는 React 애플리케이션에서 서버 응답에 대한 상태인 fetch, caching, update와 같은 동작을 쉽게 다룰 수 있도록 하며, Client State와 Server State를 명확하게 분리하여 관리할 수 있도록 도와주는 라이브러리입니다.
React Query
Query를 직역하면 질문, 질의문으로 요청으로 볼 수 있습니다. 이때 요청을 보내는 곳이 바로 DB 서버이며 종합적으로는 DB 서버에 요청을 보내는 것을 Query라고 볼 수 있습니다.
React Query는 서버에게 요청을 보내는 Query와 요청에 대한 응답(서버 데이터)를 캐싱하고 서버 데이터에 대한 적절한 핸들링 등 여러 편리한 기능들을 제공해줍니다.
React Query는 클라이언트에서 쿼리와 쿼리에 대한 서버 데이터를 클라이언트 캐시로 관리합니다. React 코드에서 서버 데이터가 필요할 때 Fetch API나 Axios를 통해 바로 서버에게 요청을 보내지 않고 React Query 캐시를 요청합니다.
React Query 클라이언트를 어떻게 구성했느냐에 따라 캐시의 데이터를 유지 관리합니다. 데이터를 관리하는 것은 React Query이지만 서버의 새 데이터로 캐시를 업데이트하는 시기를 설정하는 것은 사용자의 몫입니다.
React Query Manages Data
React Query의 캐시에는 특정 쿼리에 대한 Key가 존재하며 해당 키를 통해 쿼리를 식별합니다.
클라이언트 캐시의 데이터와 서버의 데이터가 일치하는지 확인해야 하는데 여기에는 두 가지 방법이 있습니다.
첫 번째로 명령형으로 처리하는 방법이 존재합니다. 해당 데이터를 무효화하고 캐시에 교체할 새 데이터를 서버에서 가져오게 지시하는 것입니다.
두 번째로는 선언형입니다. 이는 re-fetch를 트리거하는 특정 조건을 구성하는 것입니다. 예를 들어, 브라우저 창이 다시 포커스되었을 때 새 데이터를 서버에서 가져오도록 구성하는 것입니다.
React Query Feature
추가적으로 React Query는 서버 상테 관리에 도움이 되는 많은 도구가 함께 제공됩니다.
-
모든 쿼리의 로딩 및 오류 상태를 유지해주기 때문에 수동으로 다루어야 할 필요가 없어집니다.
-
사용자를 위해 데이터의 Pagination 또는 Infinity Scroll일 때 필요한 경우에 데이터를 가져올 수 있도록하는 Lazy loading 도구도 제공됩니다.
-
서버 데이터를 미리 pre-fetch하고 캐싱하여 사용자가 데이터를 필요로할 때 pre-fetch되어 캐싱된 데이터를 제공하기 때문에 요청과 응답에 대한 시간을 줄일 수도 있습니다.
-
React Query를 통해 서버의 데이터를 업데이트(Mutation)하여 관리할 수도 있습니다.
-
각 쿼리들은 키로 식별되기 때문에 페이지 내 여러 컴포넌트가 동일한 데이터를 요청하는 경우 한 번만 요청하도록 중복 요청을 제거할 수 있습니다.
-
서버에서 오류가 발생하는 경우에 대한 재시도를 관리할 수 있습니다.
-
쿼리가 성공하거나 오류가 났을 때를 구별하여 특정 조건에 따라 실행될 콜백함수를 전달할 수도 있습니다.
