[RQ(3)]첫 번째 프로젝트: Blog-em Ipsum

프로젝트 소개

임시 text를 사용하는 블로그 post 프로젝트

사용할 server: JSON Placeholder

• 블로그 서버를 흉내 내 엔드 포인트들이 있음.
• post를 가져오거나, post에 대한 comment 를 볼 수 있음.
• update도 할 수 있지만, server data는 안변함.

배울 것

react-query 개념에 초점을 맞춤.

• fetching data
• Loading/ error 상태를 다룬다. (사용자에게 알릴 수 있음.)
• dev tools (query 작동 방식을 살펴볼 수 있음.)
• pagination
• prefetching (페이지네이션으로 prefetching 하는 것. next page를 prefetch 해서 user가 다음 페이지를 클릭하면 바로 data를 받음)
• mutations (서버 데이터를 변경)

React-query 설치 및 시작

1) 설치

npm i @tanstack/react-query

2) Create query client(query client 생성)

• 쿼리를 관리하고 서버 데이터에서 캐시도 하는 client

3) Apply QueryProvider

• 자식 컴포넌트에게 cache랑 client configuration을 제공한다.
• 이 provider는 query client를 값으로 사용한다.

4) Call useQuery

• 서버에서 데이터를 받으려면 useQuery hook을 사용해야 한다.
• 이 hook이 서버에서 데이터를 가져오는 역할.