reactquery1

ReactQuery

• 서버에서 데이터를 받아와서 캐싱하고 동기화하는 작업을 쉽게 만들어주는 서버상태관리 라이브러리

• https://tanstack.com/query/v3/

• Context API, 리덕스나 리코일 같은 상태관리 라이브러리는 클라이언트의 데이터 관리에는 적합하지만, 서버 데이터 관리에는 적합하지 않다, 이러한 단점을 보완하는 것이 리액트쿼리

• 서버와 통신하는 코드를 간결하게 만들 수 있다.

• 서버값을 클라이언트에 가져오거나 캐싱,값업데이트,에러핸들링 등 비동기 과정을 편하게하는데에 사용

• 서버로부터 값을 가져오거나 업데이트하는 로직을 store내부에 개발하는 경우가 많다,

• store는 클라이언트 state를 유지해야 하는데 어느순간부터 클라이언트데이터와 서버데이터가 공존하게 되고 그 데이터가 서로 상호작용하면서 서버데이터도 클라이언트데이터도 아닌............끔혼탄

• 그래서, react-query를 사용함으로 서버, 클라이언트 데이터를 분리한다.

react-query 장점

- 캐싱
- get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예: 게시판의 글을 가져왔을때 게시판의 글을 생성하면 게시판 글을 get하는 api를 자동으로 실행)
- 데이터가 오래됐다고 판단되면 다시 get (invalidateQueries)
- 동일 데이터 여러번 요청하면 한번만요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능)
- 무한스크롤 (Infinite Queries)
- 비동기 과정을 선언적으로 관리할 수 있다.
- react hook과 사용구조비슷

$ yarn install react-query

1. 먼저 react의 가장 기본이 되는 곳에 react-query를 사용하도록 세팅