RTK Query

Henry·2022년 12월 5일

Admin

목록 보기

2/2

들어가는 말

어드민 프로젝트를 하며 새롭게 사용하는 라이브러리와 사용 방법에 대해서 구글링해보며 사용했지만,그것에 대한 이론적 근거에 대해 공부는 부족했던 것 같습니다.
이번 포스팅은 상태관리와 Redux, RTK query에 대해 공부한 내용을 기록해보려고 합니다.

RTK query를 사용한 이유

1. 서버 데이터 상태 관리를 위해 라이브러리를 사용해야했습니다.

로딩 상태, 에러 여부 등을 관련 컴포넌트 내부에서 작성할 필요가 없음.
자동 데이터 캐싱을 통해 서버의 부담도 줄일 수 있음.
일정 시간이 지나거나, 데이터 변동이 생겼을 때 자동으로 캐시된 데이터를 제거하고 다시 받아와 유저에게 최신의 데이터를 보여줄 수도 있음.

2. 팀에서는 콘텐츠팀의 빠른 실험을 위해 어드민이 빨리 제작되기를 원했습니다.

createApi를 통해 관련 코드들을 모두 한 곳에 작성할 수 있음.

3. RTK Query의 기능

transformResponse
mutation을 통해 useGetquery 등으로 작성 가능

4. 사용 예정이었던 Redux Toolkit의 연장선

RTK query 사용 방법

1. Create API Slice - API 서비스 생성하기

// base URL과 엔드포인트들로 서비스 정의
export const hashTagApi = createApi({
  reducerPath: 'hashtag', // 스토어의 reducer로 지정할 Path의 이름
  tagTypes: ['HashTag'],  // 자동으로 데이터가 패치되게 구별할 타입
  baseQuery: fetchBaseQuery({
    baseUrl: baseUrl + '/hashtag',
    prepareHeaders: (headers) => {
      const token = sessionStorage.getItem('accessToken');
      if (token) headers.set('Authorization', `Bearer ${token}`);
      return headers;
    },
  }),
  endpoints: (builder) => ({
    getHashtagList: builder.query({ // HTTP GET의 경우
      query: (page) => `/?size=15&page=${page - 1}`,
      providesTags: ['HashTag'], // 받아온 데이터에 태그 부여
      transformResponse: (response: HashtagList): GetHastag => {
        const { content, totalPages, totalElements } = response;
        const tableHeaderData = content.map((tableData) => {
          return {
            id: tableData.id,
            tag: tableData.tag,
          };
        });
        return { content: tableHeaderData, totalPages, totalElements };
      },
    }),
		addHashtag: builder.mutation({ // POST, PATCH, DELETE 등의 경우
      query: (addHashTagForm) => ({
        url: `/`,
        method: 'POST',
        body: addHashTagForm,
      }),
      invalidatesTags: ['HashTag'], // 해당 태그를 가진 캐시 데이터 제거(타입 체크도 자동으로 됨)
    }),
	)}

// 정의된 엔드포인트에서 자동으로 생성된 훅을 함수형 컴포넌트에서 사용하기 위해 export
export const {useGetHashtagListQuery} = hashTagApi;

2. 스토어에 서비스 추가하기

const store = configureStore({
  reducer: {
    [hashTagApi.reducerPath]: hashTagApi.reducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(hashTagApi.middleware),
});

export default store;

3. 애플리케이션은 Provider로 감싸기

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

4. 컴포넌트에서 쿼리 사용하기

const { data: hashtagList } = useGetHashtagListQuery(page);

data, status, error 로 알맞는 UI를 렌더링할 수 있습니다.
또한 useQuery 는 유틸리티 불리언 값인 isLoading, isFetching, isSuccess, isError 로 가장 최근의 요청에 대한 값을 제공합니다.