React-Query는 서버 상태를 관리하는 라이브러리중 하나이다. React-query에서 지원하는 코드 스니펫중 대표적인 useQuery 와 useMutation 에 대해 알아보자.

React-Query

React Query는 데이터 페칭, 캐싱, 동기화, 서버 상태 업데이트 등을 쉽게 하도록 도와주는 React 라이브러리이다.

장점

• 위에서 말한 것처럼 데이터 페칭, 캐싱, 동기화, 서버 상태 업데이트 등을 더 용이하게 해 준다.
• 기존의 복잡한 코드를 React-Query의 로직으로 변경할 수 있다.
• 대역폭을 절약하고 메모리 성능을 향상시키는 데 도움이 될 수 있다.

이 외에도 정말 많은 장점이 존재한다!

시작하기

설치

npm

npm install react-query

yarn

yarn add react-query 

초기 설정

React-Query를 쓰려면, 먼저 다음과 같은 과정을 거쳐야 한다.

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

function App() {
	return (
		<QueryClientProvider client={queryClient}>
        	{ ... }
		</QueryClientProvider>
	);
}

export default App;

• 캐시와 상호작용하기 위한 QueryClient 인스턴스를 생성한다.
• QueryClientProvider 컴포넌트를 통해 앱에서 QueryClient 인스턴스에 접근할 수 있도록 최상단 컴포넌트에 추가한다.
  
  

useQuery

useQuery 는 비동기로 작동하며, GET, POST 요청과 같은 작업을 하는데 사용된다.

const result = useQuery(queryKey, queryFn, options);

이렇게 구조 분해 할당을 이용해 선언할 수도 있다.

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

Query Keys

React-Query에서는 쿼리 캐싱을 query key를 기반으로 관리한다.
또한 query key는 문자열이거나 배열이여야 하며, 유니크한 값이여야 한다.

Query Functions

query function은 Promise를 반환하는 비동기 함수여야한다. ex) axios(), fetch()

Options

useQuery의 기능을 제어한다.
자세한건 공식 문서를 참고하자!

return

useQuery의 리턴값으로는 위와 같이 data, isLoading, error이 대표적이다.

• isLoading : 쿼리에 데이터가 없고 fetching 하는 상태. 그에 대한 정보를 반환한다.
• isError : 쿼리에 에러 발생 여부를 반환한다.
• isSuccess : 쿼리의 실행 여부를 반환한다.
• error : 쿼리가 isError 상태인 경우 에러 정보를 반환한다.
• data : 쿼리가 isSucess 상태인 경우 데이터를 반환한다.
• isFetching : 쿼리의 fetching/refetching 여부를 반환한다.

더 자세한 정보나 다른 return값에 대한 정보는 공식 문서를 참고하자.

예제

function Example() {
  const { isLoading, error, data, isFetching } = useQuery({
    queryKey: ["repoData"],
    queryFn: () =>
      axios.get(주소).then((res) => res.data),
  });

  if (isLoading) return "로딩중...";

  if (error) return `에러가 발생했습니다. 에러 사유 : ${error.message}`;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.id}</p>
      <p>{data.info}</p>
      <p>{data.statement}</p>
      <p>{data.follows}</p>
      <div>{isFetching ? "업데이트중..." : ""}</div>
    </div>
  );
}

useMutation

useMutation은 POST, PUT, DELETE와 같은 데이터를 생성, 업데이트, 삭제 할 때 사용된다.

const requestData = useMutation(mutationFn, options);

useMutation 또한 구조 분해 할당을 이용해 선언할 수 있다.

const { data, isLoading, mutate } = useMutation(mutationFn, options);

Mutation Function

mutation function은 Promise를 반환하는 비동기 함수여야한다. ex) axios(), fetch()
위에서 나온 query function과 같다고 보면 된다.

Options

useMutation의 기능을 제어한다.
자세한건 공식 문서를 참고하자!

return

useQuery와 같은 반환값을 받으며, mutate 메서드가 추가되어있다.
mutate는 useMutation을 이용해 작성한 내용들이 실행될 수 있는 트리거 역할을 한다.
즉, useMutation을 정의 해둔 뒤 이벤트가 발생하면 mutate를 해주면 되는 것이다.

예제

function Example() {
  const addComment = useMutation({
    mutationFn: (newComment) =>
      axios.post(주소, newComment),
  });
  
  const handleSubmit = (e) => {
    e.preventDefault();
    addComment.mutate(new FormData(e.currentTarget).get("comment"));
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea name="comment" />
      <button type="submit">댓글 남기기</button>
    </form>
  )
}