[TIL] useRouteMatch, react query, React Query Devtools

오늘 공부한것 & 기억하고 싶은 내용

useRouteMatch

• 너가 특정한 URL에 있는지의 여부를 알려준다.

react query

• state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리다.
• "global state"를 건드리지 않고 react 및 react native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트 함
• 우리가 스스로 실행하고 있었던 로직들을 축약해준다.
• useQuery는 너의 fetcher 함수를 부르고, fetcher 함수가 loading중이라면 리액트쿼리는 boolean값을 알려줄 것이고, fetcher 함수가 끝나면 기존에 ain.ts에 있는 json을 불러옴
• useQuery라는 hook이 fetcher함수 fetchCoins를 불러오고 fetcher함수가 isLoading이라면 ~~까지 단 한줄로 설명이 가능하다.
• react query는 response를 caching한다. 더이상 api 호출 안함

  const {isLoading, data} = useQuery("allCoins", fetchCoins)
  
  // const [coins, setCoins] = useState<CoinInterface[]>([]);
  // const [loading, setLoading] = useState(true);
  // useEffect(() => {
  //   (async () => {

  //     setCoins(json.slice(0, 100));
  //     setLoading(false);
  //   })();
  // }, []);
 

export async function fetchCoins() {
  return fetch("https://api.coinpaprika.com/v1/coins").then((response => response.json()

);
}

react-query Devtools

• React Query의 모든 내부 작동을 시각화하는 데 도움이 되며 문제가 발생하면 디버깅 시간을 절약 가능
  기본적으로 React Query Devtools는 process.env.NODE_ENV === 'development'인 경우에만 번들에 포함되므로 프로덕션 빌드 중에 제외하는 것에 대해 안심

import { ReactQueryDevtools } from 'react-query/devtools';

< ReactQueryDevtools initialIsOpen={false} / >

https://react-query.tanstack.com/devtools#_top

배운점 & 느낀점

리액트 툴 개념을 많이 봤는데 리액트쿼리만큼 코드를 확 줄여주는? 건 없었어서 신기했지만
너무 축약을 해둬서 아직은 ... 이해를 많이 못한 상태이다.
아마 다른 누군가가 리액트 쿼리로 작업을 해둔걸 본다면 코드 분석만으로도 엄청난 ... 시간을 쓸 거 같은 느낌~ 앞으로 프로젝트들은 리액트 쿼리를 많이 쓸지는 모르겠지만 익혀두면 분명 좋을 개념인거 같다.