[React Query] React Query 소개

React Query (Server State Management for React)

state vs props

state와 props는 모두 자바스크립트의 순수한 객체입니다. 렌더링에 영향을 미치는 정보를 담고 있기 때문에 React는 state나 props의 값이 변경되면 화면에 렌더링해야 할 데이터가 바뀌었기 때문에 리렌더링을 하게 됩니다. 이들은 중요한 차이점이 있습니다. state는 컴포넌트 내부에서 관리가 됩니다 (함수 내부에서 선언 된 지역변수와 비슷합니다). props는 컴포넌트로 전달됩니다 (함수에 매개변수를 전달하는 것과 비슷합니다).

Client State vs Server State

Client State

브라우저 세션과 관련된 정보, 즉 클라이언트가 제어하고 소유하는 데이터입니다.

ex) 유저가 선택한 페이지의 언어, light or dark 테마, 폼 입력값 등

 

서버랑 연관이 없고 특정 사용자를 위해 계속 지니고 있어야 하는 값을 의미합니다.

 

Server State 

서버 (DB)에 저장되어 있는 데이터이면서 클라이언트단에 그려져야 하는 데이터입니다. 서버로 부터 불러오는 데이터를 말합니다.

ex) DB에 저장되어 있는 게시판의 글 목록, 댓글 목록 등

 

사용자에게 보여주기 위해 클라이언트에서는 이 데이터들이 필요합니다.

React Query가 해결 해 주는 문제는 무엇인가요?

React Query는 클라이언트단에서 서버 데이터의 캐시를 유지합니다. React에서 서버의 데이터가 필요할 때 서버로 바로 가지 않습니다. 대신에 서버의 데이터가 담겨있는 React Query Cache에 요청을 합니다 (다만, Cache에 담겨있는 데이터가 어떤 상태인지에 따라 서버에 데이터를 요청할 수도 있습니다). React Query의 역할은 서버 데이터를 Cache에 유지하는 것 입니다. 즉 서버의 데이터를 클라이언트에 캐싱하는 것을 의미합니다.

[그림 1-1] React와 React Query 그리고 Server의 흐름

 

React Query는 데이터를 관리합니다

[코드 1-1] React Query의 데이터 관리 방식

 

React Query는 데이터를 관리하고 언제 서버의 새로운 데이터로 Cache를 업데이트 할 것인지 지정할 수 있습니다 (사용자 설정). 데이터를 업데이트하는 방식은 명령형과 선언형으로 구분할 수 있습니다. 명령형은 현재 Cache의 데이터를 업데이트 해야 하는 경우에 직접 업데이트를 하라고 명령하는 방식입니다. 선언형은 언제, 어떻게 Cache의 데이터를 업데이트 해야 하는지 설정을 하는 방식입니다. 우리는 클라이언트의 Cache 데이터를 서버의 데이터와 동일하게 유지하고 싶을 때가 있습니다. 영화관 좌석 예약 시스템 같은 경우에는 어느 좌석이 예약되었는지 서버로부터 즉각적으로 데이터를 확인을 할 수 있어야 시스템이 정상적으로 작동할 수 있을 겁니다. 이를 위해 Cache에 저장되어 있는 현재의 data를 무효화하고 서버에서 가져온 새로운 데이터를 저장할 수 있습니다. 이것이 React Query가 데이터를 관리하는 방식입니다.

다양한 툴

React Query는 이 외에도 Server State Management를 위한 다양한 툴들을 보유하고 있습니다.

Loading / Error states

서버로부터 데이터를 가져오는 과정에 대해서 Loading과 Error 상태를 유지합니다. 이를 통해서 데이터를 fetch하는 과정에서 아직 완료되지 않은 상태일 때, 에러가 발생했을 때에 따른 처리를 간편하게 해줄 수 있습니다 (형식적으로 처리 할 필요가 없습니다).

[그림 1-2] React의 일반적인 fetch

 

Pagination / Infinite Scroll

게시판의 페이지를 처리하거나 스크롤을 내릴 때 마다 서버에서 새로운 데이터를 받아오는 등의 처리를 할 수 있습니다.

Prefetching

만약 사용자에게 특정 데이터가 필요할 것으로 예상이 되면 특정 데이터를 미리 서버로부터 가져올 수 있습니다. Cache에 저장을 해놓게 되면 사용자가 서버랑 통신할 필요가 없이 빠르게 화면을 볼 수 있습니다.

Mutations

React Query는 서버로부터 데이터를 가져오는 것 외에도 서버의 데이터를 생성, 수정, 삭제할 수 있습니다. React Query에서는 Mutation을 통해 이러한 기능을 제공하고 있습니다.

 

De-duplication of Requests

React Query는 서버로부터 데이터를 요청할 때 key로 식별하여 데이터들을 관리하게 됩니다. 만약 페이지를 로드했을 때 같은 data (같은 key)를 요청하는 여러개의 컴포넌트가 있으면 React Query는 오직 1번만 요청을 보내게 됩니다. 하나의 쿼리가 서버로 부터 데이터를 요청하는 동안 다른 컴포넌트에서 동일한 쿼리가 데이터를 요청하면 이 요청은 제거하게 됩니다.

Retry on Error

만약 서버로부터 데이터를 요청할 때 에러가 발생하면 React Query는 다시 요청할 수 있도록 도와줍니다. 기본적으로 React Query는 첫 요청이 실패했을 때 추가적으로 3번의 요청을 보내고 모두 실패하게 되면 그때 요청을 error로 간주합니다. 에러 처리를 위해 callback을 사용할 수 있으며 요청이 성공했을 때, 실패했을 때에 따라 특정 처리를 할 수 있습니다.