1. React-Query에 대해

React-Query의 소개

웹 애플리케이션을 위한 데이터 페칭 라이브러리로 설명되지만, 좀 더 기술적인 측면에서 보면 웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 손쉽게 해줍니다. (공식문서 인용)

React-Query는 React 앱의 서버 상태(state)를 관리하는 라이브러이다. state는 크게 두가지로 나눠볼 수 있다.

바로, 클라이언트 상태(Client State)와 서버 상태(Server State)로 나뉜다.

Client State vs Server State

먼저, 클라이언트 상태는 웹 브라우저 세션과 관련된 모든 정보를 의미한다. 예를 들어, 다크 모드에서의 state 같은? 이것은 단순히 사용자의 상태를 추적할 뿐 서버에서 일어나는 일과는 아무 관련이 없다.

반면 서버 상태는 서버에 저장되지만 클라이언트에 표시하는 데 필요한 데이터다. 예를 들어, 데이터베이스에 저장하는 블로그 게시물 데이터가 있겠다.

Redux나 Jotai, Recoil 등과 같은 상태관리 라이브러리들은 애플리케이션의 전체 상태를 관리하는 반면, React-Query는 서버 데이터와 그에 관련된 비동기 작업에 특화되어 있다. 아래에서 React-Query는 어떤 문제를 해결할 수 있는지 자세히 알아보자.

React-Query는 어떤 문제를 해결할까?

React-Query는 클라이언트에서 서버 데이터 캐시를 관리한다. React 코드에 서버 데이터가 필요할 때, Fetch나 Axios를 사용해 서버로 바로 이동하지 않고 React Query 캐시를 요청한다.

React Query의 캐시 예시를 보자.

key: 'blog-posts'
data: [
    1: {
        title: 'React Query',
        tagLine: 'What is this thing?'
    },
    2: {
        title: 'React Query Mutations',
        tagLine: 'Not just for ninja turtles',
    }
]

캐시를 보면 blog-post라는 키를 할당해서 데이터를 식별한다. 클라이언트 캐시에 있는 이 데이터가 서버의 데이터와 일치하는지 확인 해야하는데, 여기에는 두 가지 방법이 있다.

먼저, 명령형(imperatively)으로 처리하는 방법이다. 쿼리 클라이언트에 이 데이터를 무효화하고 캐시에 교체할 새 데이터를 서버에서 가져오게 지시하는 것이다.

다른 하나는 선언형(declaratively)이다. Refetch를 트리거하는 조건을 구성하는 것이다. 예를 들어, 브라우저 창이 다시 포커스 되었을 때처럼,,! 그리고, staleTime으로 다시 가져오기를 언제 트리거할지도 구성할 수 있다.

서버 상태 관리 Tools

• Loading/Error states : 서버에 대한 모든 쿼리의 로딩 및 오류 상태를 유지해주기 때문에, 수동으로 할 필요가 없어진다.

• Pagination/infinite scroll : 페이지네이션과 무한 스크롤을 위한 도구를 제공한다.

• Prefetching : 데이터를 미리 가져와서 캐시에 넣으면, 사용자가 언제 데이터를 필요로 할지 예상하여 prefetch를 할 수 있다.

• Mutations : 서버에서 데이터의 변이(Mutation)나 업데이트를 관리할 수 있다.

• De-duplication of requests : 쿼리는 키로 식별되기 때문에 React-Query는 요청을 관리할 수 있고, 페이지를 로드하고 해당 페이지의 여러 구성 요소가 동일한 데이터를 요청하는 경우 쿼리를 한 번에 보낼 수 있다.

• Retry on error : 또한 서버에서 오류가 발생하는 경우에 대한 재시도를 관리할 수 있다.

• Callbacks : 쿼리가 성공하거나 오류가 났을 때를 구별해서 조치를 취할 수 있도록 콜백을 전달할 수 있다.