onSuccess와 onError

이 두 속성은 React Query 훅에서 사용되는 중요한 옵션이다. 특정 상황에서 실행되는 콜백 함수를 설정할 수 있도록 도와준다.

설명

onSuccess

이 속성은 데이터 가져오기가 성공적으로 완료되었을 때 실행되는 콜백 함수다. 해당 요청이 성공하면 호출되며, 서버로부터 받은 데이터나 결과를 활용하여 추가적인 작업을 수행할 수 있다.

onError

데이터 가져오기가 실패했을 때 실행되는 콜백 함수다. 요청이 실패하면 호출되며, 네트워크 오류나 서버 오류 등의 상황에서 활용 가능하다.

예시

import { useQuery } from 'react-query';

const fetchUserData = async (userId) => {
  const response = await fetch(`/api/user/${userId}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user data');
  }
  return response.json();
};

const UserProfile = ({ userId }) => {
  const { data, error, isLoading } = useQuery(['user', userId], () => fetchUserData(userId), {
    onSuccess: (data) => {
      console.log('User data fetched successfully:', data);
    },
    onError: (error) => {
      console.error('Error fetching user data:', error);
    },
  });

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

아주 onSuccess와 onError를 사용한 간단한 예시다. 코드는 props로 받은 userId로 API를 통해 user의 정보를 가져와 렌더링하는 코드다.

여기서 onSuccess와 onError 코드는 콜백함수로써 데이터를 가져오는데 성공하면 console.log를 찍었다.

사용이유

1. 의도적인 작업 분리: 데이터 가져오기의 성공 및 실패에 대한 작업을 별도의 콜백 함수로 분리하여 코드를 더 깔끔하고 읽기 쉽게 유지.
2. 상태 관리 및 오류 처리:

• onSuccess 콜백은 데이터 가져오기가 성공하면 상태를 업데이트하고 추가 작업을 수행하는 데 사용.
• onError 콜백은 실패한 경우에도 적절한 오류 처리를 할 수 있도록 도움.

3. 로그 및 모니터링: 성공 및 실패 시에 로그를 남기거나 모니터링을 수행하기 위해 사용.

이러한 이유에서 이 두 속성 사용한다.

정리하기

프로젝트를 진행하면서 React Query를 사용할 때, 자주 사용한 대표 속성 onSuccess와 onError를 정리했다. 프로젝트를 진행할 때는 성공할 때와 실패했을 때를 구분짓기 위한 콜백함수라고만 생각을 했지만, 사용이유를 정리하면서 확실한 이유를 알게 되었다.

단순히 '이렇게 사용되니까'가 아닌 정확한 이유로 사용하기 위한 코드를 할 수 있도록 꾸준히 공부해야겠다.