React Query의 useQuery에서 사용하는 config 옵션 6가지

by

React Query는 데이터 가져오기와 관련된 다양한 옵션을 제공합니다. 이 중에서도 useQuery 훅에서 사용되는 config 옵션에 대해 자세히 알아보겠습니다. config는 쿼리의 동작을 세밀하게 제어하고 조정하는 데 사용됩니다.


1. enabled

enabled 옵션은 쿼리가 활성화되어 데이터를 가져올 것인지 여부를 나타내는 부울 값입니다. 기본값은 true이며, false로 설정하면 쿼리가 수동으로 활성화되어야 합니다. 예를 들어:

const { data } = useQuery('todos', fetchTodos, {
  enabled: someCondition, // someCondition이 true일 때만 쿼리 활성화
});


2. retry

retry 옵션은 쿼리를 재시도하는 횟수나 조건을 설정하는 객체입니다. 예를 들어, { retries: 3, retryDelay: 1000 }와 같이 설정하면 최대 3번 재시도하며 각 재시도 사이에 1초의 딜레이가 있습니다.

const { data } = useQuery('todos', fetchTodos, {
  retry: 3, // 최대 3번 재시도
  retryDelay: 1000, // 재시도 간격: 1초
});


3. onSuccess

onSuccess 옵션은 쿼리가 성공적으로 데이터를 가져왔을 때 실행할 콜백 함수입니다. 데이터를 처리하거나 상태를 업데이트하는 데 사용됩니다.

const { data } = useQuery('todos', fetchTodos, {
  onSuccess: (data) => {
    // 데이터 가져오기 성공 후 수행할 작업
    console.log('데이터 가져오기 성공:', data);
    // 상태 업데이트 등의 작업 수행
  },
});


4. onError

onError 옵션은 쿼리가 실패했을 때 실행할 콜백 함수입니다. 오류 처리에 사용됩니다.

const { data } = useQuery('todos', fetchTodos, {
  onError: (error) => {
    // 데이터 가져오기 실패 시 수행할 작업
    console.error('데이터 가져오기 실패:', error);
    // 오류 처리 등의 작업 수행
  },
});


5. onSettled

onSettled 옵션은 쿼리가 완료되었을 때(성공 또는 실패 모두 포함) 실행할 콜백 함수입니다.

const { data } = useQuery('todos', fetchTodos, {
  onSettled: (data, error) => {
    // 쿼리 완료 후 수행할 작업
    if (error) {
      console.error('쿼리 실패:', error);
    } else {
      console.log('쿼리 성공:', data);
    }
    // 완료 후의 작업 수행
  },
});


6. refetchOnWindowFocus

refetchOnWindowFocus 옵션은 페이지나 탭이 다시 포커스를 받을 때 쿼리를 자동으로 다시 불러올지 여부를 나타내는 부울 값입니다. 이 옵션을 true로 설정하면 페이지가 다시 활성화될 때 쿼리를 자동으로 다시 실행합니다.

const { data } = useQuery('todos', fetchTodos, {
  refetchOnWindowFocus: true, // 페이지 포커스 시 자동 재시도
});


이제 React Query의 useQuery에서 사용되는 config 옵션에 대한 설명과 예제를 살펴보았습니다. 이러한 옵션들을 활용하여 데이터 가져오기 및 관리를 효율적으로 제어할 수 있습니다. React Query의 공식 문서에서 더 많은 옵션과 기능에 대한 정보를 확인할 수 있습니다.



Leave a Comment