Redux, Redux-Toolkit이 필요한 이유와 실제 구현 방법

📖리덕스란?

리덕스의 핵심은 중앙 저장소인 store에서 상태를 효율적으로 관리하여 각 컴포넌트로 바로 전달하는 것입니다. 이를 통해 개발자들은 더 적은 코드를 작성하고, 상태 관리에 더 집중할 수 있습니다.

우리가 만드는 컴포넌트에는 공통적으로 관리되는 데이터가 존재합니다. 이러한 공통데이터를 한곳에서 관리하지 않고 필요한 컴포넌트마다 새로 코드를 작성하게 된다면 코드의 가독성과 유지보수성이 떨어지고 복잡성이 커질 것입니다. 때문에 서비스 규모가 크고 공통적으로 관리하는 데이터가 많을수록 적합한 상태 관리 라이브러리를 이용해 코드를 작성하는 것이 효율적입니다.

리덕스 외에도 다른 상태관리 라이브러리(Context API, mobx 등)이 있지만 결과적으로 리덕스를 사용하기로 한 것은 성능 최적화나 비동기 지원 난이도의 측면에서 리덕스가 우월하다고 생각했고 리덕스만의 디버깅 툴로 인한 효과적인 에러를 잡을 수 있다는 장점 때문이었습니다. 또한 모행 프로젝트에서 TypeScript를 도입하고 있기 때문에 컴포넌트에서 상태를 조회할 때나 액션생성 함수를 사용 할 때 일일이 찾아보지 않고 자동완성으로 찾을 수 있다는 점도 매력적으로 다가왔습니다.

물론 장점만이 있는 것은 아닙니다. 리덕스의 가장 큰 단점은 보일러 플레이트를 많이 쓰게 된다는 것입니다. 때문에 상대적으로 코드량이 간소한 mobx의 사용도 고민했지만, 리덕스 개발팀에서 릴리즈한 Redux Toolkit이라는 라이브러리가 이같은 문제를 포함한 기존 리덕스가 가진 여러 문제를 해결하고 있다는 것을 알게 되었습니다.

✨왜 리덕스 툴킷인가?

리덕스는 아무리 작은 기능이라도 액션 타입, 액션 생성함수, 리듀서를 기술해야 합니다. 또한 코드 단순화를 위해 redux-actions을, typescript 지원을 위해 typesafe-actions, 불변성 간소화 코드 작성을 위해 immer 등등의 라이브러리를 별도로 도입해야 해야 하기에 팀프로젝트의 규모에서 리덕스를 쓰다 보면 굳이 이렇게까지 해야 하나 하는 생각이 듭니다. 리덕스 툴킷은 이런 문제를 해결하기 위해 리덕스 개발팀에서 공식적으로 제공하는 라이브러리입니다.

공식문서에서 말하는 리덕스 툴킷의 특징은 다음과 같습니다.

1. Simple : 스토어 설정, 리듀서 생성, 변경 불가능한 업데이트 로직 등과 같은 일반적인 사용 사례를 단순화하는 유틸리티 포함

2. Opinionated : 스토어 설정을 위한 좋은 기본값 제공, 가장 일반적으로 사용되는 Redux addons 내장

3. Powerful : Immer 및 Autodux와 같은 라이브러리에서 영감을 얻어 mutative하게 작성해도 불변성 로직으로 작성 가능, 전체 상태 슬라이스를 자동으로 생성 가능

4. Effective : 적은 코드로 많은 작업 수행 가능

   아래는 실제 프로젝트에서 리덕스와 리덕스 툴킷을 사용해 구현한 코드입니다.

🔎실제 프로젝트에서 구현한 코드

• 구현 코드 (PlaceBookmarkSlice )

  export const PlaceBookmarkSlice = createSlice({
    name: "placeBookmark",
    initialState,
    reducers: {},
    extraReducers: (builder) => {
      builder.addCase(getPlaceBookmark.pending, (state) => {
      });
      builder.addCase(getPlaceBookmark.fulfilled, (state, action) => {
        state.data = action.payload;
      });
      builder.addCase(getPlaceBookmark.rejected, (state) => {
      });
    },
  });

해당 코드는 Redux Toolkit을 사용하여 생성한 PlaceBookmarkSlice 리듀서 코드입니다. 여행지 북마크 api에 가져온 정보들을 저장하거나 관리하기 위해서 만든 공간이며, 이 리듀서는 Redux store에서 placeBookmark라는 이름으로 사용됩니다. createAsyncThunk() 함수를 사용하여 비동기 작업 처리를 했기 때문에 자동으로 pending, fulfilled, rejected 액션을 생성하여 비동기 작업의 성공 여부를 처리할 수 있습니다.

• 구현 코드 (getPlaceBookmark)

  export const getPlaceBookmark = createAsyncThunk(
    "mypage/placebookmark",
    async (token: string) => {
      const response = await axios.get(`/api/myPage/place/bookMark`, {
        headers: {
          "Access-Token": token,
        },
        withCredentials: true,
      });
      return response.data.data;
    }

백엔드에서 IsBookmarked의 여부를 가져오는 코드입니다.

해당 코드는 Redux Toolkit의 createAsyncThunk을 이용하여 비동기 액션을 생성하는 예시입니다. 앞서 말했듯이 createAsyncThunk은 Redux Toolkit에서 제공하는 간편한 방법으로 비동기 액션을 생성할 수 있게 해주는 함수입니다. 이 함수를 이용하면 해당 액션에 대한 세 가지 상태pending, fulfilled, rejected를 자동으로 관리해주며, 비동기 처리 중에 발생할 수 있는 예외 상황도 처리할 수 있습니다.

👍 결론

위와 같이 리덕스 툴킷을 적용했을 때 실제로 느낀 장점은 이렇습니다.

우선, 기존 리덕스를 쓰면서 불필요하다고 느꼈던 코드량이 대폭 줄어들었습니다. createSlice를 만들어두면 선언된 슬라이스 이름을 따라서 리듀서와 그리고 그것에 상응하는 액션 생성자와 액션 타입을 자동으로 생성해주기 때문입니다. 또한 createAsyncThunk 함수를 사용하여 비동기 작업을 보다 쉽게 관리할 수 있었습니다. 전체적으로 리덕스의 단점을 잘 보완한 라이브러리 툴이라는 생각이 들어 기쁜 마음으로 함께 할 수 있었습니다!

• 참고자료 Redux-Toolkit 공식문서