🔥 설치하기

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

채널 보기
존 매카시가 들려주는 인공지능의 탄생 이야기
미들웨어 vs 가드, 왜 NestJS에서는 가드가 더 똑똑할까? | NestJS 가이드
class-validator 와 DTO | NestJS 가이드
매번 ValidationPipe 복붙하세요? NestJS 전역 파이프로 한 번에 해결하기 | NestJS 가이드
Product와 Coproduct가 Bifunctor인 이유 | 프로그래머를 위한 카테고리 이론
Pro펑터, 입력과 출력을 동시에 다루는 펑터 | 프로그래머를 위한 카테고리 이론
NestJS 파이프가 뭔가요? 컨트롤러를 보호하는 방법 | NestJS 가이드
변환 파이프로 컨트롤러 코드 깔끔하게 만들기 | NestJS 가이드