이재만 교수의 공간

200 OK : 요청이 성공적으로 처리됨

201 Created : 요청이 성공적으로 처리되어 새 리소스가 생성됨

400 Bad Request : 서버가 요청을 이해하지 못함

401 Unauthorized : 인증이 필요한 페이지를 요청함

403 Forbidden : 서버가 요청을 거부함

404 Not Found : 요청한 리소스를 찾을 수 없음

500 Internal Server Error : 서버 내부 에러가 발생함

stale - 신선하지 않다, 데이터가 더 이상 유효하지 않다

기본 값은 0

데이터를 조회하는 순간 데이터는 바로 유효하지 않게 됨

데이터가 유효하지 않다면 기회가 주어졌을 때 

다시 요청하여 데이터를 최신화

재요청 기회가 주어지는 시점은 

똑같은 캐시 키를 사용하는 useQuery를 사용하는 컴포넌트가 마운트 될 때

cacheTime은 useQuery Hook을 사용한 컴포넌트가 언마운트 되고 나서

해당 데이터를 얼마동안 유지할지에 대한 설정

기본 값은 5분

useQuery를 사용한 컴포넌트가 언마운트 되고 나서

5분 안에 다시 마운트된다면 isLoading 값이 true로 되지 않음

처음 렌더링하는 시점부터 data 값이 이전에 불러온 데이터로 채워져 있게 됨

staleTime에 따라 해당 데이터가 유효하다면 재요청하지 않고

유효하지 않다면 재요청

예제를 통해 이해

Case 1. (기본 옵션) 기본 옵션에서 staleTime은 0, cacheTime은 5분

1. SampleA 컴포넌트에서 useQuery(['articles'], getArticles) 사용

 - 데이터가 조회되는 순간 데이터가 더 이상 유효하지 않다고 간주

2. 나중에 SampleB라는 컴포넌트가 화면에 마운트되고, 이 컴포넌트도 
useQuery['articles'], getArticles) 를 사용

- SampleB가 화면에 나타나는 순간, SampleA에서 불러온 데이터를 그대로 보여줌

- 캐시 키를 통하여 해당 데이터가 유효한지 확인

- 지금 상황은 데이터가 유효하지 않기 때문에 재요청

- 재요청이 끝나면 새로운 데이터가 SampleB와 SampleA에 모두 반영

- 요청은 한 번만 하지만, 해당 캐시 키를 사용하는 useQuery Hook에 모두 반영

3. SampleA와 SampleB가 모두 언마운트

 - 같은 캐시 키를 가진 useQuery를 사용하는 컴포넌트가 화면에서

모두 언마운트되면 5분동안 데이터 유지

4. 5분 안에 SampleA 컴포넌트가 다시 마운트 됨

 - 컴포넌트가 처음 보일 때 이전에 불러온 데이터를 그대로 사용

 - 데이터가 유효하지 않기 때문에 재요청, 새로운 데이터로 대체

5. SampleA 컴포넌트가 언마운트 되고 5분 뒤에 다시 마운트 됩니다.

 - 5분이 지났기 때문에 캐시에서 기존 데이터 제거

 - data가 undefined이며 새로 요청

Case 2. (staleTime 3분) 만약 staleTime을 3분(1000 x 60 x 3)으로

설정했을 때 어떻게 작동하는지 확인

1. SampleA 컴포넌트에서 useQuery(['articles'], getArticles,

{ staleTime: 1000 x 60 x 3 } )을 사용

 - 응답받은 데이터는 3분 동안 유효함

2. 3분 안에 같은 키를 가진 useQuery를 사용하는 컴포넌트

SampleB 컴포넌트가 마운트

 - 기존에 받아온 데이터를 그대로 사용

 - 3분 안에 컴포넌트가 마운트 되어서 데이터가 유효하다고 간주

   새로 요청하지 않음

3. SampleA 컴포넌트와 SampleB 컴포넌트가 모두 언마운트

 - 데이터가 5분동안 캐시에 유지

4. 5분 안에 SampleA 컴포넌트가 마운트

 - 5분 안에 컴포넌트가 마운트됐기 때문에, 캐시에 있던 데이터를 그대로 사용

 - 만약 마지막으로 데이터를 요청한지 3분 안에 마운트 됐다면

데이터를 새로 요청하지 않음.

  3분 이상 경과됐다면 데이터를 새로 요청, 새로운 데이터로 대체

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에서 사용할 데이터의 초기값을 지정하고 싶을 때 사용

Hook을 기반으로 데이터를 편하게 로딩

React Query가 없으면 로딩, 결과, 오류를 위한 상태를 직접 관리

컴포넌트에서 바로 API를 요청하면 사용자가 다른 화면으로 이동하여

컴포넌트가 화면에서 사라질 때 상태 또한 사라짐

다시 컴포넌트를 보여줄 때 받아온 값을 사용하지 못하고

다시 API 요청

즉 캐싱되지 않음

1. Hook을 기반으로  데이터 로딩을 훨씬 편하게 함

2. 캐싱도 기본적으로 제공

npx react-native run-ios --simulator="iPhone 15 Pro"