🔥 설치하기

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

채널 보기
트라이(Trie)를 이용한 자동 완성 알고리즘 | Trie 자료구조 이야기
BTree 노드의 구조는?
우리가 매일 쓰는 맞춤법 검사기와 라우터 속에 숨겨진 알고리즘은? | Trie 자료구조 이야기
스칼라 곱셈과 내적의 기하학적 의미 | 선형대수학
마지막편, 트라이 노드를 50% 이상 줄이는 방법? 압축 트라이 성능 분석 | Trie 자료구조 이야기
트라이(Trie) 자료구조: 파이썬으로 삽입(Insert) 연산 구현하기 | Trie 자료구조 이야기
Trie(트라이) 자료구조 원리와 파이썬 클래스 설계 및 구현 | Trie 자료구조 이야기
Trie 자료구조 완전 정복 - 개념부터 시각화까지 | Trie 자료구조 이야기