[PreOnboarding] RTK Query를 사용해보자

과제를 하던 중 전역으로 상태관리를 해야할 부분이 있어 리덕스를 사용하게 되었습니다. 자료를 찾던 도중 리덕스 툴킷에서 제공하는 RTK query를 보게되었고 익혀두면 좋을 것 같아서 공부를 시작햇습니다. 

API 서비스 생성하기

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const contentApi = createApi({
  reducerPath: "contentApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "api 베이스가 될 주소!",
    prepareHeaders: (headers) => {
      headers.set("헤더에 추가하고 싶은 이름", "값");
      return headers;
    },
  }),
  endpoints: (builder) => ({
    getContents: builder.query({ query: () => "api를 요청할 주소" }),
  }),
});

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

 

RTK Query를 사용할때, 전체 API를 보통 한곳에 정의합니다. 이 점은 swr이나 react-query같은 라이브러리들과 가장 많이 다른 점일 것인데, 여기에는 여러가지 이유들이 있습니다. 저희의 관점에서는 여러개의 커스텀 hooks들이 다른 파일들에 있는 것 보다 한곳에 위치하는게 요청, 캐시 무효화, 공통 앱 설정을 관리하기가 더욱 쉽다고 생각합니다.

 

이게 무슨소리고 하면서 공식문서를 들여다 봤지만 도저히 이해가 되질않아 한참을 이구간에서 쳐다보기를 반복했는데, 일단 RTK query의 장점을 생각해보았다. 

내가생각하는 장점은(아닐수도 있다.)

1. 액션과 리듀서를 나눠 로딩상태, 실패인상태, 성공인 상태의 정의를 하지않아도 알아서 해준다.

const {data, error, isLoading} = useGetContentQuery();

 

이외에도 여러가지 요소가 있지만 data(결괏값), error(실패했을시), isLoading(로딩 상태인지)를 알아서 정의해서 이것저것 리듀서를 만들고.. 액션을만들고.. 그에 따른 상태변화를 적용해주고.. 를 하지 않아도 알려준다. 확실히 이전에 리덕스를 간략하게 구현한 것과 비교했을때 같은 기능임에도 불구하고 코드량이 어마어마하게 차이가 났다.

2.  api 요청하는 로직있는 파일 따로.. 액션 파일따로.. 리듀서 파일따로 .. 그냥 하나의 파일에 관리하자!

기존에 조금이지만 리덕스를 사용해봤을때  service->auth, action, reducer 등 하나의 동작을 하기위해 여러가지 파일에 분포되어있었는데, RTK query는 그냥 간략하게 한군데다가 때려박은 느낌이였다. axios를 팀원들과 사용하기로 했었지만 사용할 필요없이 안에 baseQuery와 endpoint를 사용해 요청을 하는것이 매력적인 것 같다. 

사실 이제 GET 요청을 하는 아주 일부분만 찍먹을 해본 것이지만 너무나도 신세계였고 편했다. PATCH 요청은 또 builder.query 가 아니라 builder.mutation이라고 한다. 이건 이제 공부를 해봐야 할 것 같다.

막혔던 구간!

baseQuery: fetchBaseQuery({
    baseUrl: "api 베이스가 될 주소!",
    prepareHeaders: (headers) => {
      headers.set("헤더에 추가하고 싶은 이름", "값");
      return headers;
    },
  })

 

쿼리의 헤더에 특정 헤더를 추가하여 보낼 일이 있었는데 헤더를 그냥 무지성으로 baseUrl, headers(자동완성에 있었는데!)를 넣고 실행해봤지만 결과는 빨간맛 그자체였다. 그래서 공식문서를 자세히 뒤져보니 헤더에 추가할때 헤더의 인터페이스는 이렇게 생겨먹었다.

;(
  headers: Headers,
  api: {
    getState: () => unknown
    extra: unknown
    endpoint: string
    type: 'query' | 'mutation'
    forced: boolean | undefined
  }
) => Headers

 

첫번째 인자로는 헤더를 받고, 두번째 인자로는 api를 받는데 이게 무슨 소린가 했더니 두 번째 인자를 넣게 된다면 getState()를 인증 토큰과 같이 필요한 정보를 저장한 경우 redux 저장소에 액세스하는 데 사용할 수 있다고 한다. 나는 토큰을 활용할 기능을 구현할 것아 아니니 패스!

헤더를 받아 헤더에 값을 추가하고 새로운 헤더를 리턴했어야 했고. 

headers.set("헤더에 추가하고 싶은 이름", "값");

이구문을 사용해 헤더에 추가를 하였고 추가된것을 확인했다!

---

 

RTK query를 사용해 보았는데 아주 간단한 기능만 구현해봤어서 좀더 딮하게 파보면 도움이 될 것같은 느낌이다. 사실 아직 아는게 별로 없어 이것이 맞게 사용하고 있는지는 모르겠지만 기본 적인 액션과 리듀서를 구현한 리덕스와 비교해 볼 수 있는 시간이여서 재밌었다. 

 

끝