첫 번째로 알아볼 리액트 쿼리의 Hook은 useQuery입니다. 이 Hook은 데이터의 캐시 키와 Promise를 반환하는 함수를 기반으로 데이터의 로딩/결과/오류 상태를 관리해줍니다.

예시 코드를 한번 확인해볼까요?

import {useQuery} from 'react-query';

function Sample() {
  const result = useQuery('articles', getArticles);
  const { data, error, isLoading } = result;
}

useQuery의 첫 번째 인자에는 조회하고 싶은 데이터의 캐시 키를 넣습니다. 리액트 쿼리에서는 이 캐시 키를 사용하여 데이터를 캐싱합니다. 한 번 데이터를 받아온 다음, 나중에 같은 요청을 해야 하는 상황에서 데이터가 이미 존재한다면 기존에 있던 데이터를 바로 보여줍니다. 그리고 설정에 따라 데이터를 새로 요청할 수도 있습니다.

물론 캐싱에 관한 설정도 따로 할 수 있습니다. 예를 들어 캐싱 기간 또는 캐싱 비활성화 등을 세 번째 파라미터로 설정할 수 있습니다. 이 작업은 추후 해보겠습니다.

두 번째 인자에는 Promise를 반환하는 함수를 넣습니다. 그러면 이 컴포넌트가 렌더링될 때 해당 함수를 호출하고, 이에 대한 상태가 관리됩니다.