6. 리덕스: 최고의 상태 관리 솔루션 - 4

RTK를 활용한 리덕스 로직 표준화

• RTK 패키지는 리덕스 개발을 쉽게 만들어주는 여러 가지 도구를 제공한다. 이 패키지는 단순히 개발을 쉽게 만들어줄뿐만 아니라 일반적으로 저지를 수 있는 실수도 방지해주며, 모범사례를 제안하는 등 다양한 기능을 가지고 있다.

---

RTK란 무엇인가?

• 리덕스 툴킷(Redux toolkit; 이하 RTX)은 리덕스 개발을 단순화하는 도구 모음으로, 리덕스 로직을 작성하는 데 있어 공식적으로권장되는 접근 방식이다. 이전에는 React Smarter Kit로도 알려져 있었따. 이 툴킷의 노드 패키지는 @reduxjs/toolkit이라는 이름으로 사용할 수 있으며, 이는 핵심 redux 패키지를 둘러싸고 있다. 요약하자면, 이 패키지는 리덕스 애프리케이션을 구축하는 데 필요한 유틸리티와 공통 의존성을 제공한다.
• 이 도구에는 스토어 설정, 리듀서와 액션 생성, 불변 업데이트 로직 작성, 상태의 전체 슬라이스를 한 번에 생성하는 것과 같은 일반적인 사용 사례를 다루는 데 도움이 된다.
• 기본적으로 RTK는 대부분의 사용 사례를 다루기 위해 다음과 같이 공식적으로 권장되는 도구 또는 라이브러리 세트를 자동으로 지원한다.
  • 리덕스 개발자 도구
  • 이머(immer)
  • 리덕스 썽크(Redux Thunk)
  • 리셀렉트(Reselect)
• RTK는 타입스크립트를 지원함으로써 API의 탁월한 타입 안전성을 보장하며, 코드에서 사용되는 타입의 수를 줄인다.

---

RTK로 어떤 문제를 해결할 수 있는가?

• RTK는 개발 과정을 가속화하고 권장되는 모범사례를 자동으로 적용하는 데 도움이 된다. 이는 리덕스 라이브러리에서 발견되는 다음 세 가지 주요 이슈를 해결한다.
  • 리덕스 스토어 구성이 너무 복잡함
  • 대규모 애플리케이션을 구축하기 위해 리덕스 라이브러리가 너무 많은 의존성을 요구함
  • 리덕스는 효율성과 코드 품질에 영향을 미치는 많은 보일러플레이트 코드가 필요함
• 툴킷은 글로벌 스토어를 구성하는 특정 옵션을 제공하며, 리덕스 API를 추상화해서 개발을 간소화하는 액션과 리듀서를 생성한다.

---

RTK Query란 무엇인가? 어떻게 사용하는가?

• RTK Query는 리덕스 애플리케이션에서 일반적인 사용 사례를 단순화하는 강력한 데이터 호출 및 클라이언트 사이드 캐싱 도구다. 예를 들어, 웹 애플리케이션에서 데이터 호출을 구현하는 경우, 수동으로 데이터 호출 캐싱 로직 등을 일일이 작성하지 않아도 사용할 수 있게 하는 등의 사용 사례를 지원한다. RTK 패키지를 사용하는 경우 이러한 쿼리 기능은 선택적인 추가 기능으로 제공된다. 또한 이 기능은 createSlice 및 createAsyndThunk 같은 RTK API 메서드를 기반으로 한다.
• 웹 애플리케이션 내에서 수행하는 데이터 호출을 하는 사용 사례를 바탕으로 RTK Query의 사용법을 알아보자.
• 먼저 RTK Query 패키지에서 createAPI 및 fetchBaseQuery API로 생성된 baseQuery 구성과 서버와 상호 작용하는 API 엔드포인트 목록을 가지고 있는 객체를 인수로 받는다.
• 이 예제에서는 두 개의 엔드포인트가 생성된다. 하나는 user를 생성하는 용도이고, 다른 하나는 user의 목록을 불러오는 용도다.

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

export const usersServerApi = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://jsonplaceholder.typicode.com/',
  }),

  endpoints: (builder) => ({
    users: builder.query({
      query: (page = 1) => `users?page=${page}&limit=10`,
    }),

    createUser: builder.mutation({
      query: (name) => ({
        url: 'users',
        method: 'POST',
        body: { name },
      }),
    }),
  }),
})

export const { useUsersQuery, useCreateUserMutation } = usersServerApi

• 위 코드에서 볼 수 있듯이 RTK Query는 각 엔드포인트에 대한 리액트 훅을 자동으로 생성해서 함수 컴포넌트에서 export 선언을 통해 사용할 수 있게 한다.
• 다음으로, 데이터 호출을 처리해서 사용자 정의 미들웨어와 함께 RTK Query가 생성한 슬라이스 리듀서를 루트 리듀서에 매핑해서 스토어를 구성해야 한다. setupListeners API는 refreshOnFocus와 refreshOnReconnect 동작을 활성화하기 위한 선택적인 유틸리티다.

import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { usersServerApi } from './services/usersAPI'

export const store = configureStore({
  reducer: {
    [usersServerApi.reducerPath]: usersServerApi.reducer,
  },

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(usersServerApi.middleware),
})

setupListeners(store.dispatch)

• 그다음, 다른 리덕스 애플리케이션과 마찬가지로 react-redux 패키지가 제공하는 Provider 컴포넌트로 전체 애플리케이션을 감싸서 스토어를 prop 형태로 자식 컴포넌트에 전달해야 한다. 

const rootElement = document.getElementById('root')

render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement,
)

• 이 작업이 모두 끝났다면 컴포넌트 내에서 쿼리를 통해 요청을 보낼 수 있다. user 목록의 두 번째 페이지를 요청하고 싶다면 다음과 같은 코드로 호출하면 된다.

const { data, error, isLoading } = useUsersQuery(2)

• 사용자의 data 뿐만 아니라 error, isLoading 필드 외에도 앞의 쿼리는 기능 요구사항에 따라 유용하게 사용할 수 있는 isFetching, isError, isSucess 등의 다른 불리언 유틸리티도 제공한다.
• 리덕스는 대규모 애플리케이션을 위한 최고의 상태 관리 솔루션이다. 그러나 이러한 종류의 애플리케이션에서 발생하는 버그를 디버깅하기란 꽤나 어려운 일이 될 수 있다. 리덕스 개발자 도구는 애플리케이션의 상태가 언제, 어디서, 어떻게 변경됐는지 추적함으로써 개발과 디버깅을 수월하게 만들어 준다.