2025. 3. 12. 09:10

const { data, error, isLoading } = useQuery(['articles'], getArticles);

 

첫 번째 인자 - 조회하고 싶은 데이터의 캐시 키

 

이 캐시 키를 사용하여 데이터를 캐싱

 

한 번 데이터를 받아온 다음, 나중에 같은 요청을 해야 하는 상황에서

 

데이터가 이미 존재한다면 기존에 있던 데이터를 바로 보여줌

 

설정에 따라 데이터를 새로 요청도 가능

 

캐싱에 관한 설정도 따로 할 수 있음

 

캐싱 기간, 캐싱 비활성화 등을 세 번째 파라미터로 설정

 

두 번째 인자 - Promise를 반환하는 함수

 

이 컴포넌트가 렌더링 될 때 해당 함수를 호출

 

이에 대한 상태가 관리됨

 

* 반환값

 

status: API의 요청 상태를 문자열로 나타냄

 

 - 'loading': 아직 데이터를 받아오지 않았고, 현재 데이터를 요청 중

 - 'error': 오류 발생

 - 'success': 데이터 요청 성공

 - 'idle': 비활성화된 상태(따로 설정해 비활성화한 경우)

 

isLoading: status === 'loading'

isError: status === 'error'

isSuccess: status === 'success'

isIdle: status === 'idle'

 

error: 오류가 발생했을 때 오류 정보

data: 요청 성공한 데이터

isFetching: 데이터가 요청 중일 때 true가 됨

(데이터가 이미 존재하는 상태에서 재요청할 때

  isLoading은 false, isFetching은 true)

refetch: 다시 요청을 시작하는 함수

 

요청의 결과물이 특정 변수에 따라 달라진다면 꼭 캐시 키에 포함

 

세 번째 파라미터에 options 객체

 

enabled: boolean 타입의 값을 설정,

 

이 값이 false라면 컴포넌트가 마운트될 때

 

자동으로 요청하지 않음

 

refetch 함수로만 요청이 시작

 

retry: boolean | number | (failureCount: number, error: TError) => boolean

 

이 값을 true로 하면 실패했을 때 성공할 때까지 계속 반복 요청

 

이 값을 false로 하면 실패했을 때 재요청하지 않음

 

이 값을 3으로 하면 3번까지만 재요청

 

이 값을 함수 타입으로 설정하면 실패 횟수와 오류 타입에 따라 

 

재요청할지 함수 내에서 결정

 

retryDelay: number | (retryAttempt: number, error: TError) => number

요청이 실패한 후 재요청할 때 지연 시간을 얼마나 가질지 설정

 

시간 단위는 ms

 

staleTime: 데이터의 유효 시간을 ms 단위로 설정, 기본 값은 0

 

cacheTime: 데이터의 캐시 시간을 ms 단위로 설정, 기본 값은 5

 

캐시 시간은 Hook을 사용하는 컴포넌트가 언마운트 되고 나서 

 

해당 데이터를 얼마나 유지할지 결정

 

refetchInterval: false | number - n초마다 데이터를 새로 고침하도록 설정

 

refetchOnmount: boolean | 'always' 타입의 값을 설정

 

컴포넌트가 마운트될 때 재요청하는 방식을 설정

 

기본값은 true

 

- true일 때 는 데이터가 유효하지 않을 때 재요청

- false일 때는 컴포넌트가 다시 마운트되어도 재요청하지 않음

- 'always' 일 때는 데이터의 유효 여부와 관계 없이 무조건 재요청

 

onSuccess: (data: Data) => void 타입의 함수를 설정

 

데이터 요청이 성공하고 나서 특정 함수를 호출하고 싶을 때 사용

 

onError: (error: Error) => void 타입의 함수를 설정

 

데이터 요청이 실패하고 나서 특정 함수를 호출하고 싶을 때 사용

 

onSettled: (data?: Data, error?: Error) => void 타입의 함수

 

데이터 요청의 성공 여부와 관계 없이 요청이 끝나면 특정 함수를 호출하도록 설정

 

initialData: Data | () => Data 

 

Hook에서 사용할 데이터의 초기값을 지정하고 싶을 때 사용