- 설치: npm install react query
- api 관련 함수(fetcher 함수) 들은 따로 파일로 분리하는 것이 좋다. ~ api.ts
- fetcher함수는 json data의 Promise 를 return 해야 한다. (정확히 json data는 아니지만)
- const { 로딩여부, 데이터 } = useQuery(query key, fetcher 함수)
... 로딩중 또는 로딩이 끝나면 react query가 알려준다.
... 로딩이 끝난 데이터를 담아서 주기도 한다.
- React query가 데이터를 캐시에 저장해두기 때문에, 로딩하고 화면을 전환한 뒤에 다시 돌아가도
로딩을 하지 않는다.
- React query 에 있는 devtools를 import 해오면, 캐시에 있는 query를 볼 수 있다.
... import { ReactQueryDevtools } from 'react-query/devtools’
- 캐시에 저장된 데이터는 다시 로딩하지 않는다. ~ 속도 빨라짐
'Front-end > React' 카테고리의 다른 글
| React) useContext 기본 구조 (0) | 2023.02.08 |
|---|---|
| React) 다양한 React 프로젝트 생성 방법 (NPM/Yarn, JS/TS) (0) | 2023.01.31 |
| React) router.tsx 세팅 (0) | 2023.01.16 |
| React + TS) Theme 세팅 ... Theme Provider (0) | 2023.01.16 |
| React) Reset css ... Global style (0) | 2023.01.16 |