[React Query] React Query 기초 정리

React Query 개념과 활용법

React Query는 React 애플리케이션에서 서버 상태 관리를 간편하고 효율적으로 처리할 수 있게 해주는 라이브러리입니다. 서버 데이터를 가져오고, 캐싱하고, 동기화하며, 업데이트할 때 강력한 기능을 제공합니다.

---

useQuery() Hook

useQuery()는 데이터를 가져오는데 사용됩니다. 컴포넌트가 마운트되면 queryFn에 정의된 함수가 자동으로 실행되어 데이터를 가져옵니다.

const { data, isLoading, isError } = useQuery({
	queryKey: ['posts', username],
	queryFn: () => getPostsByUsername(username),
	staleTime: 60 * 1000, // 60초 동안 fresh 상태 유지
})

• queryKey
  - 데이터를 캐싱할 때 사용됩니다.
  - [’posts’, username]처럼 배열 형태로 특정 데이터를 구분해 관리할 수 있습니다.
• queryFn
  - 데이터를 가져오는 함수입니다. 주로 백엔드 API 호출을 처리합니다.
• staleTime
  - 데이터가 fresh 상태를 유지하는 시간을 설정합니다.
  - 이 시간 내에 동일한 데이터를 요청하면 데이터 요청 없이 캐시 데이터를 반환합니다.

---

로딩 및 에러 처리

useQuery의 반환 값을 활용하여 로딩 상태와 에러 상태를 간편하게 처리할 수 있습니다.

const {
	data: postsData,
	isLoading,
	isError,
} = useQuery({
	queryKey: ['posts'],
	queryFn: fetchPosts,
});

if (isLoading) return '로딩 중입니다...';
if (isError) return '에러가 발생했습니다.';

return <PostList posts={postsData} />;

 

---

useMutation() Hook

useMutation()은 데이터를 추가, 수정, 삭제하는 작업에서 사용됩니다.

const uploadPostMutation = useMutation({
  mutationFn: (newPost) => uploadPost(newPost),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
});

const handleUploadPost = (newPost) => {
  uploadPostMutation.mutate(newPost, {
    onSuccess: () => {
      toast('포스트가 성공적으로 업로드되었습니다!');
    },
  });
};

• mutationFn
  - 데이터를 추가하거나 수정, 삭제할 때 호출되는 함수입니다.
• mutate() 함수
  - useMutation() Hook은 데이터를 직접 변경하지 않으므로, 데이터를 변경하려면 mutate()를 호출해야 합니다.
• onSuccess
  - 요청 성공 시 실행됩니다.
  - 예를 들어, queryClient.invalidateQueries()를 사용해 특정 데이터를 다시 가져오도록 설정할 수 있습니다.
• onError
  - 요청 실패 시 실행됩니다.
• onSettled
  - 요청 성공 또는 실패 여부에 관계없이 항상 실행됩니다.