🌸 React Query

이도경·2023년 3월 29일

fRONTeND

목록 보기

8/14

프론트엔드를 개발하다보면 구현은 간단하지만 번거로운 작업들이 몇몇 있습니다. 캐싱, 패치, 업데이트, API 통신, 로딩, 무한스크롤 등등등... 이런 개발자의 수고를 덜어주는 라이브러리 React Query를 소개합니다. 이번 포스트에서 대표적인 기능 몇 가지를 작성해보겠습니다.

React Qurey 🌸

useQuery()

RQ의 가장 대표적인 기능 uesQuery 는 비동기 로직에서 작동하도록 설계되었고, api 통신 중 Promise 를 통한 GET 의 서버에서 데이터를 가져올 때 유용히 사용됩니다.

How?

useQuery()의 기본적인 사용법은 다음과 같습니다.

result = uesQuery(유니크 인덱스, 함수);

  const result = useQuery('todos', getTodos);

변수 result에는 다음과 같은 값이 포함되어 있습니다.

isLoading또는 status === 'loading'- 쿼리에 데이터가 없으며 가져오는 중

isError 또는 status === 'error'- 쿼리에 오류 방생

isSuccess 또는 status === 'success'- 쿼리를 성공하여 데이터 사용가능

isIdle 또는 status === 'idle'- 현재의 쿼리가 비활성화

Ref

이를 통한 일반적인 사용법은 다음과 같습니다.

function Todos() {
  const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)

  if (isLoading) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // `isSuccess === true` 라고 가정할 수 있음.
  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

위의 예제는 공식문서의 간단한 todo 예제입니다. 실제 예제에서 어떻게 사용했는지 확인해보겠습니다.

//data: [부를 이름], ... 
//useQuery 등을 중복으로 사용할 수 있기에 각 함수별로 이름을 선언합니다.
  const { data: geoData, isSuccess: geoSuccess } = useQuery(
    "detail/getRevGeo",
    // 실행할 코드, (아마도 좌표값을 전송하여 행정상 지역이름을 리턴하는 코드)
      GetRevGeocode({ lat: postData?.latitude!, lng: postData?.longitude! }),
    {
	  //qurey option 위치, 정말 수도없이 많아서 따로 링크 남기겠습니다.
	  //재시도 횟수 선언
      retry: 1,
    }
  );
    
    const { status, data } = useQuery(
    ['quizDetail'],
    () => getQuizDetail(quizId),
    {
      onSuccess: (res) => {
	    // 어떤 동작들
      },
      onError: () => {
        toast.error('알 수 없는 오류가 발생하였습니다.');
      },
    }
  );

useQuery

useInfiniteQuery()

한번은 무한 스크롤을 구현해본 경험이 있습니다. 정말 많은 오픈소스와 라이브러리, 블로그 등을 찾아 겨우겨우 완성했던 기억이 나네요. RQ에서는 제 과거 경험이 무색할 정도로 아주 간단하게 무한 스크롤을 구현할 수 있습니다.
기본적으로 페이지 단위로 특정 단위 index 마다 fetch를 실행하고 hasNextPage, fetchNextPage() 등으로 페이징을 관리할 수 있습니다.

useInfiniteQuery 도 useQuery와 유사합니다. 몇몇 요소들이 추가되었습니다.

How

result = useInfiniteQuery(유니크 인덱스, 함수);

Ref

조금 지저분하지만 참고가 될까봐, 부끄러운 코드를 첨부합니다. 🥲

const {
    data: myData,
    isFetching: myIsFetching,
    isSuccess: myIsSuccess,
  	// 다음 페이지를 불러올 
    fetchNextPage: myfetchNextPage,
    hasNextPage: myHasNextPage,
  } = useInfiniteQuery(
    ["mypage/mypost"],
    ({ pageParam = 0 }) => GetPostMine({ idx: pageParam }),
    {
      retry: 3,
      getNextPageParam: (lastPage, allPages) => {
        if (
          //제 환경에서의 조건 (개인 환경에 맞게 수정)
          lastPage[lastPage.length - 1]?.statusCode === 500 ||
          allPages.flat().length !== 15
        )
          return null;
        return Math.floor((1 + allPages.flat().length) / 15);
      },
      onSuccess(data) {
        console.log(data);
      },
    }
  );

useInfiniteQuery()의 로직은 다음과 같습니다. 하지만 어떤 상황에서 함수가 실행되야 하는지 궁금하실것 같아 추가합니다.

특정 DOM 객체를 ref로 지정합니다.
const [ref, inView] = useInView();
지정한 ref가 사용자의 브라우저에 보이거나 다음 페이지가 있으면 myfetchNextPage()를 실행합니다.
useEffect(() => {
  if (inView && myHasNextPage) myfetchNextPage();
});
사용된 ref DOM 객체
<div style={{ width: "100vw", height: "5rem" }} ref={ref}></div>

useInfiniteQuery

useMutation()

GET을 사용하여 단순히 조회를 하는 useQuery와 달리 데이터를 POST, PUT, DELETE를 사용하는 등 ( 생성, 업데이트, 삭제 ) 서버로부터 데이버 변경 요청들은 mutatation을 사용해야 합니다.

How

mutation = useMutation(함수, {opt});

Ref

//putPost: 수정을 단독적으로 수행하는 함수
const { mutate } = useMutation(PutPost, {
    onMutate: (data) => {
      //시작 시
      setSubmitLoding(true);
    },
    onError: (error: Error) => {
      setError(error.message);
    },
    onSettled: () => {
      //종료 시
      setSubmitLoding(false);
    },
  });