최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다.

1. 리액트 쿼리(react-query)란 무엇일까?

여기서 "Query"의 뜻은 데이터 베이스 등에서 원하는 정보를 검색하기 위해 요청하는 것을 뜻한다.
즉, 리액트 쿼리는 데이터 페칭, 데이터 캐싱, 데이터 업데이트 등의 작업을 쉽게 만들어주는 React 라이브러리이다.

또 다른 정의는 서버 상태를 관리하는 라이브러리이다.
그렇다면 여기서 서버 상태는 어떤걸 의미할까?

2.클라이언트 상태와 서버 상태

서버 상태를 알기 위해서 먼저 클라이언트 상태를 알아보자

2.1 클라이언트 상태

클라이언트 상태는 웹 브라우저 세션과 관련된 모든 정보를 의미한다.

예를 들어 사용자는 본인이 잘 아는 언어로 텍스트를 읽기 위해 웹사이트의 언어를 선택하거나 테마를 밝은색이나 어두운 색으로 변경할 수 있다.

즉, 이는 서버에서 일어나는 것과 관련이 없는 일이다. 단순히 사용자(클라이언트)의 형태를 추적하는 것이다.

2.2 서버 상태

서버 상태는 서버에 저장되지만 클라이언트에 표시하는데 필요한 데이터이다.

원격에 위치한 공간에 저장되며 앱이 소유하거나 제어하지 않는다. 데이터를 가져오고 업데이트하기 위해선 비동기 API가 필요하다.

다른 사람과 함께 사용하며, 내가 모르는 사이에 업데이트 될 수 있다.

앱에서 사용하는 데이터가 유효 기간이 지난 상태가 될 가능성을 지닌다.

예를 들어, 쇼핑몰의 상품 목록, 게시판의 댓글, 배달앱의 주문 진행 사항 등은 모두 위와같은 특성을 가지고 있다. 그렇기에 다음에 나열된 작업의 필요성이 생긴다.

• 캐싱
• 서버 데이터 중복 호출 제거
• 만료된 데이터를 백그라운드에서 제거하기
• 데이터가 언제 만료되는지 알고 있기
• 만료된 데이터는 가능한 빨리 업데이트하기
• Pagination, Lazy Loading 데이터의 성능 최적화
• 서버 상태의 메모리 관리 및 가비지 콜렉션
• 쿼리(요청) 결과의 구조 공유를 통한 메모이제이션

이러한 기능들이 없어도 앱을 구현할수 있다. 하지만 높은 품질의 앱을 위해서는 필요한 작업들이라고 할 수 있다.

바로 리액트 쿼리가 위와같은 기능을 사용할 수 있도록 도와준다.

3. 리액트 쿼리의 핵심

리액트 코드에 서버 데이터가 필요할 때 Fetch나 Axios를 사용해 서버로 바로 이동하지 않고 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”,
	}
]

예를 들면 위 데이터가 리액트 쿼리 캐시에 저장되어 있다고 가정해보자

데이터를 구별하는 방법은 "key"값으로 구분된다.

클라이언트 캐시에 있는 데이터가 서버의 데이터와 일치하는지 확인해야 하는데 여기에는 두 가지 방법이 있다.

• 명령형 처리
  쿼리 클라이언트에 이 데이터를 무효화 하고 캐시를 교체할 새 데이터를 서버에서 가져오게 지시하는 것이다.

• 선언형 처리
  Refetch를 트리거 하는 조건을 구성하는 것이다.
  예를 들면 브라우저 창이 다시 포커스 되었을 때처럼 말이다.

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

  위와같이 stateTime으로 데이터가 만료되어서 다시 가져오기를 트리거 하는지도 구성할 수 있다.
  예를 들면, 30초 후에 브라우저 창이 다시 포커스 되었을 때 서버에서 데이터를 가져오도록 구성할 수 있다.

4. 리액트 쿼리의 기능

리액트 쿼리는 데이터 관리 뿐만 아니라 서버 상태 관리에 도움이 되는 많은 도구가 함께 제공된다.

• 서버에 대한 모든 쿼리의 로딩 및 오류 상태를 유지하기 때문에 수동으로 할 필요가 없다.

• 사용자를 위해 데이터의 Pagination, Infinity Scroll이 필요한 경우 데이터를 조각으로 가져올 수 있는 도구도 제공한다.

• Prefetch는 사용자가 언제 데이터를 가져올지 예상하여 Prefetch를 수행할 수 있다.
  - 데이터를 미리 가져와서 캐시에 넣으면 사용자에게 데이터가 필요할 때 앱이 캐시에서 해당 데이터를 가져오고 사용자는 서버에 연결할 때까지 기다릴 필요가 없어진다.

• Mutation은 데이터의 변이나 업데이트를 관리할 수 있다.

• 쿼리는 Key로 식별되기 때문에 리액트 쿼리는 요청을 관리할 수 있고 페이지를 로드하고 해당 페이지의 여러 구성요소가 동일한 데이터를 요청할 경우 리액트 쿼리는 단 한번만 보내서 해결할 수 있다
  - 기존 쿼리가 나가는 동안 다른 구성 요소가 데이터를 요청한 경우 리액트 쿼리는 중복 요청을 제거할 수 있다.

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

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