[react-query] react-query는 왜 써야할까?

 

react-query란? 왜 써야할까?

react-query의 아주 큰 장점 중 하나는 "캐싱"이다.

그렇다면 캐싱은 뭘까?

캐싱이란?

캐싱이란 저장한다는 뜻이다.

컴퓨팅에서 캐싱이란 오랜시간이 걸리는 작업의 결과를 저장해서 시간과 비용을 필요로 회피하는 기법을 의미한다.

캐싱은 고성능 에플리케이션을 만드는데 가장 중요한 요소 중의 하나다. 

 

- 캐싱의 대표적인 사례

웹브라우저는 한번 다운로드 한 이미지 파일은 임시저장 디렉토리에 저장했다가 다음 요청이 있을 때 다운로드 하지 않고 다운받아 둔 이미지를 사용한다.

 

* 참고 생활코딩 https://www.opentutorials.org/course/697/3839

 

이처럼 react-query는 캐싱을 해준다.

데이터를 저장해주기 때문에 유저들이 "로딩중....."이라는 글씨를 안보게 해준다.

 

다시말하면

화면에 들어올 때마다 api에 연결하지않고 react-query는 이미 캐시에 있는 데이터를 준다.

정말 놀라운 기능이다!

---

react-query 알아보기

React Query의 Hook 중 많이 사용하는 두가지가 있다.

 

1. get 요청에는 useQuery

2. post, put, patch, delete 요청에는 useMutation

 

내가 처음 react-query를 공부할 때 모든 요청이 useQuery 하나로 이루어지는 줄 알았는데

아니다. get 요청에는 useQuery, post, put, patch, delete 요청에는 useMutation를 사용하자!!!

 

이 게시물에는 useQuery에 대해서만 언급해보려고 한다.

 

useQuery

const { data, isLoading, error } = useQuery(
  queryKey, 
  fetchFn, 
  options,
);

 

 

나는 기본적으로 이런 구조로 많이 사용한다. 

 

data에는 비동기 통신이 성공(resolve)했을 경우의 데이터가 들어가고

isLoading은 비동기 통신이 진행중이면 trun이고

error에는 에러 내용이 들어간다.

 

하나하나 설명을 해보자면 

첫번째 인자  'queryKey'

'queryKey’는 이후에 사용되는 캐싱이나 데이터 재요청, 상태 변경 등 여러 곳에서 사용된다.

useQuery를 여러 개 사용할 때, 각각의 useQuery를 식별하기 위한 식별자이기도 하다.

'queryKey'는 문자열 혹은 배열의 형태로도 올 수 있다.

두번째 인자 'fetchKey'

비동기 통신하여 Promise를 반환하는 함수이다.

axios, 내장 함수인 fetch 함수 다 사용 가능하다.

세번째 인자 'options'

말그대로 옵션이다. 사용해도되고, 사용하지 않아도 된다.

자신이 필요한 옵션이 있다면 사용해주면 된다.

 

내가 사용했던 옵션으로는 select, refetchOnWindowFocus, enable이 있다.

 

- select : 데이터 패칭 성공 시 원하는 데이터 형식으로 변환 가능 옵션

slice메서드, splice메서드 등으로 데이터를 가공할 수 있다.

{
 	 select: data => data.reverse()
}

 

- refetchOnWindowFocus : window focus 이벤트 발생 시 서버 상태 동기화 옵션

유저가 페이지에서 포커스를 잃었다가 다시 들어오면 fetching을 다시 해온다.

{
 	refetchOnWindowFocus: true 
}

 

- enable : 쿼리가 자동으로 실행되지 않게 설정하는 옵션

const {
    isLoading,
    error,
    data,
  } = useQuery(
    ['comments', 'post', 1],
    () =>
      axios
        .get('https://jsonplaceholder.typicode.com/posts/1/comments')
        .then((res) => res.data),
    {
      enabled: !!postData,
    }
  );

postData가 존재할 때만 요청한다는 코드이다.

* 코드펜 참고 https://stackblitz.com/edit/react-cv1k2d?file=src%2FExample2.js 

예시코드

  const {
    data,
    isLoading,
    error,
  } = useQuery(
    ['ClientAprMngAxios', userId],
    async () => await axios.get('api?${userId}'), 
    { enable : !!userId }
  );

  if (error) {
    return <h2>{error.message}</h2>;
  } else if (isLoading) {
    <div>회원승인정보를 조회하고 있습니다.</div>;
  } else {
    return (
     <div>{data}</div>;
    )

---

* 참고글

https://velog.io/@jewoo/React-Query-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0 => 옵션 설명 잘 되어있음

https://tech.kakaopay.com/post/react-query-1/ => 처음보는 사람도 이해하기 쉬운 예시를 제공해줌

https://velog.io/@familyman80/React-Query-%ED%95%9C%EA%B8%80-%EB%A9%94%EB%89%B4%EC%96%BC => 리액트쿼리 한글메뉴얼

https://jforj.tistory.com/243 => 이해하는데 큰 도움이 됐던 블로그