React 개인과제 Redux Toolkit으로 리팩토링

TIL 23. 11. 29

들어가며

React 심화주차 개인과제가 주어졌다. 지난 개인과제 ‘그룹 아티스트 팬레터함’ 만들기에 Redux가 아닌 Redux Toolkit을 사용하고 인증 서비스를 추가하는 것. 먼저 Redux Toolkit으로 리팩토링을 진행해보았다.

React 개인과제 Redux Toolkit으로 리팩토링

store 설정

스토어를 생성하고 초기화하는 과정

Redux

Redux toolkit

• configureStore 함수를 사용하여 스토어를 생성하고, 리듀서를 전달하여 스토어를 초기화
• 여러 개의 리듀서를 하나의 리듀서로 만드는 combineReducers 과정 하나가 줄었다 (configureStore에서 내부적으로 처리)
• Redux Toolkit에서 권장하는 미들웨어들을 자동으로 통합

Member

멤버들 중에서 선택된 멤버를 상태 관리

Redux

Redux Toolkit

• createSlice 함수를 사용하여 액션 생성자와 리듀서를 더 간단하게 작성
• 내부적으로 Immer를 사용하여 불변성 유지를 위한 코드 작성 X

Letters

팬레터 목록 상태 관리

Redux

Redux Toolkit

• 액션 생성자를 생성하기 위한 코드가 간소화
• Redux Toolkit을 사용하여 코드가 더 짧고 간결해짐

느낀점

수행했던 과제를 Redux에서 Redux Toolkit으로 리팩토링하면서 사용 이유를 몸소 느낄 수 있었다. store 설정 부분은 큰 차이가 느껴지지 않았지만 불필요한 액션 타입과 액션 생성자 함수를 정의하지 않아도 되어 코드가 많이 간소화 되었다.

리액트를 사용하며 불변성 유지를 항상 신경썼는데 이로부터 자유로워지니 오히려 어색했다. Redux를 쓰면서 가장 편하다고 생각했던 것은 Redux devTools이다. 상태 관리와 액션 타입 등 모두 기록이 되어 디버깅하기가 수월했다.

리팩토링이 어렵지 않은데다 더 효율적으로 Redux를 활용할 수 있었다는 점에서 매우 만족스럽다.