🔥 설치하기

247자
3분

강의 목차

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

NPM으로 설치하기

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

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

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

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

CDN으로 사용하기

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

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
<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>

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

요구사항

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

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

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

추천사항

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

shell
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
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

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

YouTube 영상

채널 보기
API 응답 지연과 복잡한 에러, NestJS 인터셉터로 관리하는 방법 | NestJS 가이드
NestJS 커스텀 데코레이터 인자 전달 및 파이프 검증 활용법 | NestJS 가이드
미들웨어 vs 가드, 왜 NestJS에서는 가드가 더 똑똑할까? | NestJS 가이드
NestJS 역할 기반 접근 권한 부여 - Guard, Reflector | NestJS 가이드
함수 객체의 보편적 구성 | 프로그래머를 위한 카테고리 이론
매번 ValidationPipe 복붙하세요? NestJS 전역 파이프로 한 번에 해결하기 | NestJS 가이드
입력을 전처리하는 Functor - Contravariant와 contramap 이해하기 | 프로그래머를 위한 카테고리 이론
함수 타입과 Hom-Set 이해하기 | 프로그래머를 위한 카테고리 이론