RTK Query로 서버상태 관리하기

앞서 middleware를 사용하여 비동기 처리를 통해 Redux 상태관리에 중앙집중화할 수 있었다. 다만, 현재 프로젝트에서 관리하던 상태는 서버 상태로서 관리하는 것이 효율성과 단순화에 좋다고 판단되었다.

RTK Query는 미들웨어, 액션, 리듀서 작성을 간소화하고 서버 데이터 캐싱, 업데이트, 리패칭을 효율적으로 관리하도록 도와준다.

1. RTK Query 주요 특징

• 자동 데이터 캐싱
  : 서버 데이터를 받고 자동으로 캐싱해준다. 이는 동일한 데이터 요청에 대해 불필요한 네트워크 요청을 방지한다.
• 데이터 패칭 및 동기화
  : useQuery, useMutation의 React Hooks을 제공한다. 이는 컴포넌트 내에서 API 요청을 쉽게 처리하고 데이터 상태를 관리하게 해준다.
• 데이터 업데이트 및 재검증
  : 데이터가 변경되었을 때, RTK Query는 자동으로 데이터를 재검증하고 캐시를 무효화 한다.

위의 특징은 React Query, SWR에서 제공해주는 특징과 비슷하다.

2. RTK Query만의 특징

RTK Query는 React Query, SWR과 같은 데이터 패칭 기술과 비슷하지만 특별한 접근 방식을 API 디자인에 통합했다.

• Redux 통함
  : RTK Query는 Redux 상태 관리 시스템과 통합되어 있다.
  이는 Redux를 기반으로 하는 애플리케이션에서 전체 애플리케이션 상태를 하나의 저장소에서 관리할 수 있도록 해준다.
• Redux DevTools 통합
  : Redux DevTools와의 통합을 통해 상태 변화를 추적하고 디버깅에 용이하게 해준다.

• Redux를 사용하는 프로젝트라면 RTK Query를 함께 사용하여 일관된 상태 관리를 가능토록 할 수 있다.
• Redux에 의존하지 않는 프로젝트에는 상대적으로 가벼운 React Query, SWR의 사용이 적합할 수 있다.

3. RTK Query 사용하기

• RTK Query는 API 슬라이스를 정의하여 사용한다.
• 이는 서버와의 통신을 위한 여러 엔드포인트를 정의하는 방식으로 작동한다.

import { IUser, IUpdateUsers } from '@/modules/usersType';
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const BASE_API_URL = 'http://localhost:9000';

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: BASE_API_URL }),
  endpoints: (builder) => ({
    getUsers: builder.query<IUser[], void>({
      query: () => '/user_data',
    }),
    addUser: builder.mutation<IUser, IUser>({
      query: (user) => ({
        url: '/user_data',
        method: 'POST',
        body: user,
      }),
    }),
    updateUsers: builder.mutation<IUpdateUsers, IUpdateUsers>({
      query: ({ ids, updateValue }) => ({
        url: `/user_data`,
        method: 'PATCH',
        body: { ids, isDeleted: updateValue },
      }),
    }),
  }),
});

export const { useGetUsersQuery, useAddUserMutation, useUpdateUsersMutation } =
  userApi;

4. RTK Query를 통해 관리되는 서버 상태 사용하기

• RTK Query를 사용하면 컴포넌트내에서 데이터 조회, 업데이트가 가능하다.
• 상태는 전역적으로 관리되기에 필요한 컴포넌트 내에서 사용하기 용이하다.
• 데이터 캐싱과 리패칭을 통한 동기화 처리에 효율적이다.

// 유저 데이터 조회 요청
const { data: users, isLoading, isError } = useGetUsersQuery();
// 유저 정보 업데이트 요청
const [updateUser] = useUpdateUsersMutation();
// 유저 추가 요청
const [addUser] = useAddUserMutation();

const restoreUser = async (ids: number[]) => {
  await updateUser({ ids: ids, updateValue: false });
};

const onSubmit = async (data: IUser) => {
  const newUserData: IUser = {
    id: lastId + 1,
    nickname: data.nickname,
    birthday: data.birthday,
    sex: data.sex,
    isDeleted: false,
  };

  await addUser(newUserData);
  onClose();
};

5. 미들웨어 사용후 느낀점

• RTK Query를 사용하면 서버와의 상호작용을 처리하는 코드를 줄여 프로젝트의 복잡성을 낮출 수 있다.
• 자동 캐싱, 데이터 무효화, 리패칭 기능은 성능 최적화에 도움을 준다.
• RTK Query의 사용은 Redux의 원래 목적인 예측 가능한 상태 관리를 유지하면서 비동기 작업을 쉽고 효율적으로 처리할 수 있게 해준다.
• RTK Query는 Redux를 이용한 상태 관리에서 비동기 로직이 필요한 서버 상태 관리에 매우 효율적인 도구다.