React-Query - REST

• https://tanstack.com/query/latest/
• 공식문서 따라서 Tanstack-query v5 배우기
• React-query에서 Tanstack-query로 라이브러리명을 바꿨음
• 공식문서 읽다가 오타나 잘못 표기된 정보가 있으면 github로 편집해서 알려줄 수도 있다.

1. 전반적인 소개(overview)

• TanStack Query (FKA React Query)
  • FKA : ‘formerly known as’ (~전에는 로 알려진)
  • 데이터 가져오기(fetching) 뿐만 아니라,
  • 웹앱에서 서버 상태(state)를 가져오고, 캐싱, 동기화, 업데이트할 수 있다.

💡 cache(캐시)와 캐싱

• 원래 은밀한 장소에 숨겨 놓은 ‘은닉처’라는 의미를 지니고 있지만,
• 컴퓨터 용어로 사용할 때는 ‘고속 기억장치’를 가리킵니다.
• 즉, 컴퓨터가 빨리 정보를 찾을 수 있도록 정보를 보관하는 메모리 부분을 cache 또는 cache memory라고 부름

캐싱은 빠른 속도를 위해 캐시에 데이터 저장하는 행위를 말함

• 대부분 웹 프레임워크에는 데이터를 가져오거나 업데이트하는 방법이 없음.
• 전통적인 상태관리 라이브러리에는 클라이언트 상태 작업에 적합하고,
  • 비동기 or 서버 상태 작업이 적합하지 않다.

💡 서버 상태(server state)

• 개발자가 제어하거나 소유할 수 없는 위치에 원격으로 지속되는 것
• 가져오거나 업데이트를 위해 비동기(asynchronous) API 필요
• 공동 소유권을 의미하며, 님도 모르게 다른 사람에 의해 변경 될 수 있음
• 주의하지 않으면, 님 앱이 잠재적으로 “구식”이 될 수 있다.

일단 님이 서버 상태의 특징(nature)을 파악(grasp)했다면, 다음과 같이 더 많은 문제가 존재함

• 캐싱…
• 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
• 백그라운드에서 “오래된” 데이터 업데이트
• 데이터가 “오래된” 시점 파악
• 가능한 한 빨리 데이터 업데이트 반영
• 페이지 매김 및 지연 로딩 데이터와 같은 성능 최적화
• 서버 상태의 메모리 및 가비지컬렉션 관리
  • cf. 가비지컬렉션 : 메모리 관리 기법 중 하나로 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능
• 구조적 공유로 쿼리 결과 메모이징(cf. Memoizing : 메모리써서 저장해놓는 것)

위 문제들 다 해결했으면, 천재이니 react-query 안배워도 됨. react-query팀도 위 문제들의 표면적인 부분을 조금씩 처리(scratching)하고 있음

1.1 기술적인 측면에서 React Query 장점

• 복잡한 코드를 react-query 몇 줄로 대체 가능
• 유지 관리 쉽고, 서버 상태 데이터를 추가한 새 기능을 쉽게 빌드 가능
• 빨리 데이터 갖고와서 실제 유저들이 쓰기 좋다함
• 대역폭을 절약하고 메모리 성능을 높이기 좋다함

1.2 대충 어떻게 생긴지 구경해보자

Open in CodeSandbox

1
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
2

3
// (1) 앱 root에서 QueryClientProvider를 설정해 tanstack-query 제공
4
const queryClient = new QueryClient()
5

6
export default function App() {
7
  return (
8
    <QueryClientProvider client={queryClient}>
9
      <Example />
10
    </QueryClientProvider>
11
  )
12
}
13

14
function Example() {
15
  const { isPending, error, data } = useQuery({
16
    queryKey: ['repoData'],
17
    queryFn: () => fetch('https://api.github.com/repos/TanStack/query').then(res => res.json()),
18
  })
19

20
  if (isPending) return 'Loading...'
21

22
  if (error) return 'An error has occurred: ' + error.message
23

24
  return (
25
    <div>
26
      <h1>{data.name}</h1>
27
      <p>{data.description}</p>
28
      <strong>👀 {data.subscribers_count}</strong> <strong>✨ {data.stargazers_count}</strong>{' '}
29
      <strong>🍴 {data.forks_count}</strong>
30
    </div>
31
  )
32
}

2. 설치

React Query는 React v18+와 호환되며, ReactDOM 및 React Native와 함께 작동됨.

1
$ npm i @tanstack/react-query
2
# or
3
$ pnpm add @tanstack/react-query
4
# or
5
$ yarn add @tanstack/react-query

또한 ESLint 플러그인 쿼리를 사용하면, 버그와 불일치를 찾기 좋다.

1
$ npm i -D @tanstack/eslint-plugin-query
2
# or
3
$ pnpm add -D @tanstack/eslint-plugin-query
4
# or
5
$ yarn add -D @tanstack/eslint-plugin-query