🔎React Query

• 공식문서
• 편한 비동기 과정을 위해 사용하는 상태 관리 라이브러리로 네트워크 통신 간편하게 가능
• Hook에서 네트워크 통신을 할 때의 문제점 보완 가능

💡Hook 특징과 문제점

• Hook은 안에 있는 상태를 여러 컴포넌트에서 재사용 하는 것이 아님
• Hook을 호출하는 컴포넌트마다 각각 다른 내부 상태들을 가지며, 사용할 때 마다 각각 로직 수행(네트워크 통신을 하는 Hook인 경우 각각 네트워크 통신 발생)

문제점 1. 캐시(cache)가 안됨

• 네트워크에서 받아온 데이터를 별도로 저장하는 것이 아니라 호출할 때마다 새롭게 받아옴

문제점 2. 재시도(retry) 기능 없음

• 네트워크 통신 실패했을 때 재시도하는 기능 없음

예시

• API 요청을 받아와서 상태를 리턴해주는 Custom Hook을 사용(참고: Custom Hook 포스팅)
• 같은 컴포넌트 두개에서 같은 API 호출
  
• 처음 페이지가 로딩될 때 같은 정보를 불러오지만 fetch가 두번 발생하고, 클릭할 때마다 fetch 발생함

💡useQuery

• useQuery API 활용법
• 중복되는 네트워크 요청 줄일 수 있음
• 같은 key를 가지는 요청일 경우, 한번 fetch 후 받아온 데이터 메모리에 보관(캐싱)

const query = useQuery({ queryKey: ['todos'], queryFn: fetchTodos });

• 첫번째 인자 : key
  • 네트워크 통신별로 각각 고유한 key를 가짐
  • 받아온 데이터를 key 이름으로 메모리에 보관
• 두번째 인자 : 네트워크 통신 함수
  • 네트워크 통신 통해 데이터 받아오는 함수, 받아온 데이터 Promise 형태로 값 리턴
• 세번째 인자 : options

예시

• 컴포넌트 안에서 useQuery 활용해 API 요청

  const {
    data,
    isLoading,
    error,
  } = useQuery(['exampleKey'], async () => {
    console.log('fetching in useQuery...');
    return fetch('exampleAPI').then((res) => res.json());
  });

• 처음 페이지가 로딩될 때 Custom Hook을 사용한 경우와 달리 fetch 한번 발생
• 첫번째 요청에서 fetch 후 데이터 캐싱
• 같은 key 값 exampleKey를 가지기 때문에 두번째 요청에서 fetch 발생하지 않고 캐싱된 데이터 가져옴

💡key

• key 기준으로 캐싱되기 때문에 고유한 key값을 잘 정하는게 중요
• 배열로 설정해 더 세밀하게 key들의 조합을 만듦

// key값으로 'example' 가지면 같은 캐시 사용
useQuery({ queryKey: ['example'], ... })

// 'example' + 세부 상태로 다양한 key 조합해서 다른 캐시 사용
// 아래 세가지 예시 모두 서로 다른 캐시 사용
useQuery({ queryKey: ['example'], ... })

// An individual example
useQuery({ queryKey: ['example', 5], ... })

// An individual todo in a "preview" format
useQuery({ queryKey: ['example', 5, { preview: true }], ...})

예시

• 위 예시에서 체크 여부에 따라 다른 API 받아오기

const [checked, setChecked] = useState(false);
const { data, isLoading, error }
  // checked 여부에 따라 다른 네트워크 요청을 하므로 key에 추가
  = useQuery(['exampleKey', checked], async () => { 
    console.log('fetching in useQuery...');
    return fetch(`${checked?'sale_':''}/exampleAPI`).then((res) => res.json());
  });
  const handleChange = () => setChecked((prev) => !prev);

• checked 여부에 따라 key가 달라지고 다른 API가 요청됨

근데 뭔가 이상한게 있다...🥲

• checked 여부에 따라 key 값이 ['exampleKey', false] , ['exampleKey', true]로 캐싱될 것
• 그러면 로딩될 때, 처음 체크할 때만 fetch가 발생해야 할텐데..
• 왜 상태 바뀔때마다 fetch 발생...?

이는 useQuery 사용해 데이터를 받아오면 즉시 오래된(stale) 데이터 상태가 되기 때문
useQuery의 세번째 인자인 options로 제어 가능 관련 포스팅 보러가기🤗