React | useQuery 알아보기

AEHEE·2023년 3월 22일
0

React

목록 보기
6/17
post-thumbnail

프로젝트를 진행하다가 원하는 시점에 조회하고 싶은 데이터가 있었는데 queryKey값을 제대로 작성하지 않아서 원하는 시점에 조회를 못 하게 됐던 상황이 생겼었다.
문제해결을 하면서 간단하게 useQuery에 대해서 글을 작성해본다.

React Query를 사용하여 서버로부터 데이터를 조회해올 때 useQuery를 사용해야 한다. 데이터 변경 작업을 할 때는 useMutation을 사용해야 한다.

👩🏻‍💻 useQuery

useQuery는 비동기로 작동한다. 즉, 한 컴포넌트에 여러개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아닌 두개의 useQuery가 동시에 실행된다.

useQuery는 3가지 매개변수를 받는다.

useQuery(key, function, options)

이와 같은 useQuery는 아래와 같은 형태로 쓰이게 된다.

// 1
useQuery(queryKey, queryFn);
// 2
useQuery({
  queryKey: queryKey,
  queryFn: queryRn
});

📌 queryKey

queryKey는 React Query가 query 캐싱을 관리할 수 있도록 도와준다.
queryKey는 useQuery마다 부여되는 고유 key값이고 문자열 또는 배열로 지정할 수 있다.
배열로 넘기면 0번 값은 string값으로 다른 컴포넌트에서 부를 값이 들어가고 두번째 값을 넣으면 query함수 내부에 파라미터로 해당 값이 전달된다.

// 문자열
const res = useQuery('persons', queryFn);

// 배열1
const res - useQuery(['persons'], queryFn);
// 배열2
const res - useQuery(['persons', 'add Id'], queryFn);
// 배열3
const res - useQuery(['add Id', 'persons'], queryFn);
// 배열4
const res - useQuery(['persons', {type: 'add', name: 'Id'}], queryFn);

문자열로 작성된 경우는 자동으로 길이가 1인 배열로 인식하기 때문에 결과적으로 배열1과 동일한 queryKey로 작성된다.
배열2과 배열3는 queryKey가 동일해 보이지만 React Query에게는 동일하지 않는 queryKey로 인식된다. 왜냐면 queryKey가 할당될 때 배열에 입력되는 순서도 보장해주기 때문이다.

const Query = (): JSX.Element => {
    const getPersons1 = () => {
        const res1 = useQuery(['persons'], queryFn1);
    }
    const getPersons2 = () => {
        const res2 = useQuery(['persons'], queryFn2);
    }
    return (
        <div>
            {getPersons1()}
            {getPersons2()}
        </div>
    )
}

export default Query;

이 코드에서는 서버 1개의 request만 전달이 된다.
왜냐면 res1에서 request를 서버에 전달하게 되면 res2에서는 이미 동일한 queryKey에 대한 결과값이 있기에 추가 요청을 하지 않고 res1 결과를 그대로 가져와 사용하기 때문이다.
그리고 queryFn이 다르게 정의되어 있더라도 res2에서는 res1의 결과를 그대로 전달받기에 queryFn1이 처리된 결과를 확인할 수 있다.
결국 이 코드는 아래 코드와 동일하다.

const Query = (): JSX.Element => {
    const getPersons1 = () => {
        const res1 = useQuery(['persons'], queryFn1);
    }
    const getPersons2 = () => {
        const res2 = useQuery(['persons']);
    }
    return (
        <div>
            {getPersons1()}
            {getPersons2()}
        </div>
    )
}

export default Query;

📌 queryFn

queryFnpromise 처리가 이루어지는 함수다.
그래서 결과적으로는 아래와 같은 코드로 작성이 된다.

// 1
const res = useQuery(['persons'], () => axios.get('http://~'));

// 2
const res = useQuery({
    queryKey: ['persons'],
    queryFn: () => axios.get('http://~')
});

📌 option

staleTime, cacheTime, refetch window focus설정은 다음 포스팅에서 더 자세히 알아보는걸로 =33~~

profile
UI개발자에서 FE개발자로 한걸음 더!

0개의 댓글