🔥 설치하기

247자
3분

강의 목차

React Query를 설치하는 방법은 크게 두 가지입니다. NPM을 통해 설치하거나 ESM.sh를 이용한 스크립트 태그를 사용할 수 있습니다.

NPM으로 설치하기

NPM을 사용한다면 다음 명령어로 React Query를 쉽게 설치할 수 있습니다:

npm i @tanstack/react-query
# 또는
pnpm add @tanstack/react-query
# 또는
yarn add @tanstack/react-query
# 또는
bun add @tanstack/react-query
 
shell

React Query는 React v18 이상과 호환되며 ReactDOM과 React Native 모두에서 사용할 수 있습니다.

React Query를 직접 사용해보고 싶으신가요? 간단한 예제나 기본 예제를 살펴보세요!

CDN으로 사용하기

모듈 번들러나 패키지 관리자를 사용하지 않는다면 ESM.sh와 같은 ESM 호환 CDN을 통해 React Query를 사용할 수 있습니다. HTML 파일 끝부분에 다음과 같은 스크립트 태그를 추가하세요:

<script type="module">
  import React from '<https://esm.sh/react@18.2.0>'
  import ReactDOM from '<https://esm.sh/react-dom@18.2.0>'
  import { QueryClient } from '<https://esm.sh/@tanstack/react-query>'
</script>
 
html

JSX 없이 React를 사용하는 방법은 여기에서 확인할 수 있습니다.

요구사항

React Query는 현대적인 브라우저에 최적화되어 있습니다. 다음 브라우저 버전과 호환됩니다:

Chrome >= 91
Firefox >= 90
Edge >= 91
Safari >= 15
iOS >= 15
Opera >= 77

text

사용 환경에 따라 폴리필이 필요할 수 있습니다. 더 오래된 브라우저를 지원하려면 node_modules에서 직접 라이브러리를 트랜스파일해야 합니다.

추천사항

코딩 중 버그와 불일치를 잡는 데 도움이 되는 ESLint Plugin Query를 사용하는 것이 좋습니다. 다음 명령어로 설치할 수 있습니다:

npm i -D @tanstack/eslint-plugin-query
# 또는
pnpm add -D @tanstack/eslint-plugin-query
# 또는
yarn add -D @tanstack/eslint-plugin-query
# 또는
bun add -D @tanstack/eslint-plugin-query
 
shell

이렇게 React Query를 설치하고 사용할 준비를 마쳤습니다. 각자의 개발 환경에 맞는 방법을 선택해 React Query의 강력한 기능을 프로젝트에 적용해 보세요.