React-query

React-query는 서버와의 비동기 통신을 할 때 편하게 해주는 라이브러리이다.

 

useQuery

 

 React-query를 사용하면 따로 state를 component에 선언하지 않고도 데이터에 접근할 수 있다. 예를 들어 서버와 통신을 통해 얻은 data를 component안에서 사용하려고 한다면 useState를 사용하여 data를 따로 state로 만들어서 관리해야 한다. 하지만 React-query에서 제공하는 useQuery를 통하면 data를 useState를 사용하지 않고도 서버통신 결과로 보내지는 data에 접근해서 사용할 수 있다.

 

예시

async function fetchCoins() {
  return fetch(`사용할 api url`).then((response) => response.json());
}

const Coins = () => {
  const { isLoading, data } = useQuery<ICoin[]>("key", fetchCoins);

  return (
    <>
      <Container>
        {isLoading ? (
          <Loader>loading...</Loader>
        ) : (
          <CoinsList>
            {data?.slice(0, 100).map((coin) => (
              <Coin key={coin.id}>
                {
                  <Link to={`/${coin.id}`} state={{ name: coin.name }}>
                    {coin.name} &rarr;
                  </Link>
                }
              </Coin>
            ))}
          </CoinsList>
        )}
      </Container>
    </>
  );
};

위의 코드 처럼 useQuery를 사용하면 fetchCoins함수에서 수행한 서버통신을 통해 얻은 데이터를 따로 useState에 담지 않고, destructuring을 통해 data를 사용할 수 있다.