🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Front
Tanstack Query
02-빠른 시작 및 개발도구

1. 빠른 시작

React Query는 3가지 핵심 개념을 가진다.

  • Queries (데이터 질문과 관련된 것, (데이터 있는지 질문(=조회)))
  • Mutations (데이터 변화와 관련된 것, (생성, 수정, 삭제))
  • Query Invalidation (query가 유효한지 검증)

CodesandBox Example

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

2
import { getTodos, postTodo } from '../my-api'

3


4
// Create a client

5
const queryClient = new QueryClient()

6


7
function App() {

8
  return (

9
    // Provide the client to your App

10
    <QueryClientProvider client={queryClient}>

11
      <Todos />

12
    </QueryClientProvider>

13
  )

14
}

15


16
function Todos() {

17
  // Access the client

18
  const queryClient = useQueryClient()

19


20
  // Queries

21
  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })

22


23
  // Mutations

24
  const mutation = useMutation({

25
    mutationFn: postTodo,

26
    onSuccess: () => {

27
      // Invalidate and refetch

28
      queryClient.invalidateQueries({ queryKey: ['todos'] })

29
    },

30
  })

31


32
  return (

33
    <div>

34
      <ul>{query.data?.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>

35


36
      <button

37
        onClick={() => {

38
          mutation.mutate({

39
            id: Date.now(),

40
            title: 'Do Laundry',

41
          })

42
        }}

43
      >

44
        Add Todo

45
      </button>

46
    </div>

47
  )

48
}

49


50
render(<App />, document.getElementById('root'))

2. 개발도구(Devtools)

React Query는 전용 devtools와 함께 제공한다.

2024.12.12 기준

현재 devtools는 React Native를 지원하지 않습니다. 또한 DevTools를 사용하여 Queries를 관찰할 수 있지만, Mutations은 관찰 불가능 https://tanstack.com/query/latest/docs/react/devtools#install-and-import-the-devtools

2.1 설치

devtools는 설치해야 하는 별도의 패키지이다.

1
$ npm i @tanstack/react-query-devtools

2
# or

3
$ pnpm add @tanstack/react-query-devtools

4
# or

5
$ yarn add @tanstack/react-query-devtools

Next 13+ App Dir의 경우, 작동하려면 dev 종속성으로 설치해야 한다.

다음과 같이 devtools를 가져올 수 있다.

1
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

2.2 플로팅(Floating) Mode

  • 플로팅 모드는 화면 모서리에 토글을 제공해서, devtools를 표시하거나 숨기는 기능
  • 이 토글 상태는 다시 로드할 떄, localStorage에 저장되고 기억됨
  • React 앱에서 가능한 최상단에 배치할 수록 잘 작동함 (e.g. 페이지 root 파일)
1
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

2


3
function App() {

4
  return (

5
    <QueryClientProvider client={queryClient}>

6
      {/* The rest of your application */}

7
      <ReactQueryDevtools initialIsOpen={false} />

8
    </QueryClientProvider>

9
  )

10
}

2.3 Devtools 옵션

ReactQueryDevtools의 옵션은 공식문서 참고

2.4 production(실제 운영환경) 구간에서 Devtools

Devtools는 프로덕션 빌드 단계에서 제외된다. 그러나 프로덕션 단계에서 devtools를 지연 로드하는 것이 바람직할 수 있음.

1
import * as React from 'react'

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

3
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

4
import { Example } from './Example'

5


6
const queryClient = new QueryClient()

7


8
const ReactQueryDevtoolsProduction = React.lazy(() =>

9
  import('@tanstack/react-query-devtools/build/modern/production.js').then(d => ({

10
    default: d.ReactQueryDevtools,

11
  })),

12
)

13


14
function App() {

15
  const [showDevtools, setShowDevtools] = React.useState(false)

16


17
  React.useEffect(() => {

18
    // @ts-ignore

19
    window.toggleDevtools = () => setShowDevtools(old => !old)

20
  }, [])

21


22
  return (

23
    <QueryClientProvider client={queryClient}>

24
      <Example />

25
      <ReactQueryDevtools initialIsOpen />

26
      {showDevtools && (

27
        <React.Suspense fallback={null}>

28
          <ReactQueryDevtoolsProduction />

29
        </React.Suspense>

30
      )}

31
    </QueryClientProvider>

32
  )

33
}

34


35
export default App

이를 통해 window.toggleDevtools()를 호출하면, devtools 번들을 다운로드하여 표시함

2.5 최신 번들러

번들러가 패키지 내보내기를 지원하는 경우 다음 가져오기 경로를 사용할 수 있습니다.

1
const ReactQueryDevtoolsProduction = React.lazy(() =>

2
  import('@tanstack/react-query-devtools/production').then(d => ({

3
    default: d.ReactQueryDevtools,

4
  })),

5
)

TypeScript의 경우 TypeScript v4.7 이상이 필요한 tsconfig에서 moduleResolution: 'nodenext' 설정해야 한다.

3. 타 라이브러리와 비교

아이콘 별 의미

  • ✅ : 지원됨

  • 🟡 : 지원O, 비공식

  • 🔶 : 지원O, 문서화O, but 구현 시 추가 사용자 코드 필요

  • 🛑 : 지원O, 문서화X

  • React Query

  • SWR

  • Apollo Client

  • RTK-Query

  • React Router

각자 react-query 공식문서 보고, 뭐가 좋은지 자기 상항에 맞게 판단하면 된다.

01-소개 및 설치03-타입스크립트 설정