Tanstack-Query

My구독의 React Query 전환기

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그

커스텀 훅 도입기

왜 커스텀훅을 써야하는가?

• 컴포넌트에 네트워크 처리 코드가 종속되는 느낌

원래 React 컴포넌트는 비즈니스 로직을 가지고 있는 경우가 많기도 하고, 네트워크 요청을 촉발시키는 것이야 이상할 것이 없다. 하지만 네트워크 로직 코드의 경우에는 Server State를 가져오는 것이기도 하고, 재사용성을 생각해봤을 때 따로 분리하는 것이 좋다는 생각이 든다.

컴포넌트에서 데이터를 받아와서 해당 데이터를 가공해 사용하는 로직이 있는 것은 괜찮은 것 같지만, 데이터를 가져오는 과정을 자세하게 가지고 있을 필요는 없다고 본다.

모듈화 하기위해서!

Hook이라 모듈화하려면 새로운 Custom Hook으로 감싸서 모듈화해야 하기 때문에 Custom Hook으로 만들어서 사용한다고 흔히들 말하는 것이다.

Invalidate Query

위처럼 Query Key를 분리하고, Mutation을 Custom Hook으로 만들었을 때 React Query의 강력한 기능인 Query Invalidation도 쉬워지는 면이 있다.

import { UserInfoQueryKey } from 'somewhere';

const useCreateUserMutation = (successCallback: () => void) => {
  const client = useQueryClient();

  return useMutation((data: CreateUserRequest) => api.post('/user', {...data}), {
    onSuccess: () => {
      client.invalidateQueries(UserInfoQueryKey)
        .then(() => successCallback());
  });
}