🌟 Hooks는(함수들은) 값의 재사용이 아닌 로직의 재사용이 목적이다!
컴포넌트마다 고유한 값을 가지고 있음. 전역변수를 사용해서 값을 공유할 수 있지만 코드가 지저분해짐.
값을 어떻게 효율적으로 공유할 수 있을까?
Custom hooks의 문제점?
1. 캐싱이 되지 않는다.
전역적인 상태관리가 어려움
컴포넌트마다의 상태가 있음
같은 데이터를 비효율적인 방법으로 여러 번 가져오게 될 수 있다.
2.fetch로 데이터를 받아 올 때 error가 발생하면 retry를 해주지 않음
네트워크 요청 실패 시 재 시동 기능을 제공하지 않음
✨ 비동기적으로 데이터를 관리해야되는 경우?
React Query를 이용하면 된다!(클릭하면 공식 문서로 이동)
React Query / TanStack Query란?
공식 사이트에 들어가서 보면 TanStack Query란 TS/JS, React, Solid, Vue, Svelte를 위한 강력한 비동기 상태 관리 도구라고 정의하고 있다.
1. 선언적이고 자동적임
데이터를 가져올 위치와 어느 정도로 최신이어야 되는지(업데이트 주기)를 알려주면 데이터를 자동으로 최신으로 업데이트한다.
캐싱 처리, 오래된 데이터 처리를 자동으로 해준다.
2. 간단하고 친숙하다.
전역 상태나 reducer등의 관리나 복잡한 설정이 없다. Promise, async/await를 사용할 줄 알면 알면 충분하다.
3. 확장 가능하다.
전용 개발자도구(devtools), 무한 로딩 apis, 상태 업데이트 tool 등이 제공된다.
https://tanstack.com/query/latest/docs/react/overview
https://tanstack.com/query/latest/docs/react/guides/important-defaults
🌟 이 두가지 페이지는 꼭 정독하고 react query를 사용해야한다.
`useQuery`또는 `useInfiniteQuery`를 사용하면 데이터가 stale(오래된)한 것으로 간주한다.
이를 피하기 위해서 `staleTime`옵션을 직접 설정해 줘야 한다.
stale한 데이터는 자동으로 refetch된다.
- New instances of the query mount
- The window is refocused
- The network is reconnected
- The query is optionally configured with a refetch interval
위와 같은 경우 자동으로 refetch되기 때문에 refetchOnMount, refetchOnWindowFocus, refetchOnReconnect, refetchInterval 옵션을 직접 설정해주면 자동 refetch되는 것을 방지할 수 있다.
To change this functionality, you can use options like refetchOnMount, refetchOnWindowFocus, refetchOnReconnect and refetchInterval.
npm install react-query-devtools
react-query-devtools를 다운받고 App.js에서 ReactQueryDevtools로 감싸주면 Tanstack query devtools를 아래와 같이 사용할 수 있다. 내가 가지고 있는 데이터가 Stale한 지 유무를 쉽게 확인 가능하다.
