useQuery과 useMutation

프로젝트를 진행하면서 DB의 데이터를 조회할 때는 useQuery. 생성, 수정, 삭제를 할 때는 useMutation을 사용했다. 그래서 이번에 리뷰를 하면서 좀 더 자세하게 알고 싶어 따로 포스팅을 해보고자 한다.

이 두 함수는 React Query에서 제공하는 핵심 훅(hook)이다. 이 두 훅 함수를 사용하면 API 호출 및 상태 관리를 간소화하고 최적화하는 데 도움을 준다.

useQuery

우선 useQuery이란? 비동기 데이터 가져오기 작업을 처리하는 데 사용된다. 데이터를 효율적으로 캐싱하고 관리하며, UI 업데이트를 처리할 수 있다.

예시

import { useQuery } from 'react-query';

const UserProfile = ({ userId }) => {
  const { data, error, isLoading } = useQuery(['user', userId], fetchUserData);

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

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>{data.name}</h2>
      <p>Email: {data.email}</p>
    </div>
  );
};

useQuery에 대해서는 위와 같은 예시를 들 수 있다. 이 코드는 user 데이터를 가져와서 이름과 이메일을 렌더링 하는 코드다.

1. useQuery는

• (1) 첫 번째 매개변수로 고유한 캐시 키를 받는다. 이 키는 해당 데이터의 캐싱 및 관리에 사용된다.
• (2) 두 번째 매개변수로는 비동기 데이터를 가져오는 함수를 제공한다. 이 함수는 데이터를 로드하고 반환하는 비동기 작업을 수행한다.

• data는 비동기 작업 결과 데이터
• error는 에러 정보를 포함, 에러가 발생하면 여기에서 해당 에러에 접근
• isLoading은 데이터 로딩 중인지 여부

이렇게 사용할 수 있다. 조금 더 자세하게 설명하면, user'와 userId를 조합하여 ['user', userId]와 같은 형태로 키를 생성했는데, 이 키를 기반으로 데이터가 캐시된다. 이를 통해 동일한 쿼리에 대한 중복 요청을 방지하고 효율적으로 데이터를 관리할 수가 있다.

useQuery 훅 안에는 다양한 속성이 존재하는데, 이 속성은 직접 사용하게 될 때 자세하게 포스팅해보려 한다.

useMutation

useMutation이란? 데이터를 수정하거나 업데이트하는 비동기 작업을 처리하는 데 사용되는 훅 함수다. 이를 통해 데이터 수정 작업의 상태를 관리하고 UI 업데이트를 처리한다.

예시

import { useMutation } from 'react-query';

const UpdateUsername = ({ userId, newUsername }) => {
  const mutation = useMutation(updateUsername);

  const handleClick = () => {
    mutation.mutate({ userId, newUsername });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Updating...' : 'Update Username'}
      </button>
      {mutation.isError && <p>Error: {mutation.error.message}</p>}
      {mutation.isSuccess && <p>Username updated successfully!</p>}
    </div>
  );
};

useMutation 예시이다. 이 코드는 userId와 newUsername을 props로 받아서 업데이트 하는 내용이다.

1. useMutation은 비동기 작업을 시작하는데 사용된다.
2. mutation.mutate(data): 이 함수를 호출하여 실제 비동기 작업을 트리거한다.

mutate는 useMutation 훅에서 반환되는 객체의 메서드 중 하나다. 버튼을 클릭하면 handleClick 핸들러가 작동하고 mutate 매서드가 작동하여 updateUsername 함수가 동작하여 이름을 변경한다.

그리고 mutation 객체는 작업의 상태와 UI 업데이트에 필요한 정보를 제공하는데, isLoading, isError, isSuccess 등의 반환 객체의 속성을 통해 작업의 상태를 추적이 가능하다.

마지막으로 onSuccess와 onError와 같은 콜백 함수 속성도 존재하는데 이 또한 추가적으로 포스팅하려 한다.

정리하기

이번에는 React Query의 핵심 훅 함수인 useQuery와 useMutation에 대해 포스팅했다. 이 두 훅 함수는 데이터를 CRUD 할 때 매우 유용하게 데이터를 캐싱 및 관리할 수 있게 도와준다.

기본적으로 이 두 함수를 사용하면 수월하게 데이터를 관리할 수 있다는 점을 배웠지만, 추가적으로 중요한 건 고유한 캐시 키인 것 같다. 다음 번에는 이를 더 공부해서 포스팅을 해야겠다.