reducer / redux / redux-toolkit

reducer / redux / redux-toolkit 관계와 차이

---

React에서 reducer, Redux, 그리고 Redux Toolkit은 상태 관리와 관련해서 서로 깊은 관계를 가지고 있어요. 

이걸 마치 요리에 비유해서 알기 쉽게 설명해 드릴게요. 

제가 만약 이 주제로 책을 쓴다면, '세 친구가 만들어가는 마법의 요리' 같은 제목을 붙였을 거예요!

---

---

Reducer (리듀서) - '요리법'

---

무엇인가요?: 

Reducer는 특정 데이터를 어떻게 변화시킬지 정의하는 순수한 함수예요. 

현재의 '상태(재료)'와 '액션(요리 주문)'을 받아서, 그에 따라 새로운 '상태(요리 결과물)'를 만들어 반환하는 역할을 합니다. 

 

---

어떤 역할인가요?: 

useState가 아닌 useReducer Hook을 쓸 때 이미 만났었죠? 

이 함수는 정해진 규칙(현재 상태 + 액션 → 새로운 상태)에 따라 작동하기 때문에, 항상 예측 가능한 결과를 내는 것이 특징입니다.

 

---

비유: 

Reducer는 '짜장면 만드는 요리법', '볶음밥 만드는 요리법'처럼, **재료를 가지고 음식을 만드는 구체적인 '요리법'**에 해당합니다.

---

---

Redux (리덕스) - '체계적인 중앙 주방 시스템'

---

무엇인가요?: 

Redux는 React 같은 애플리케이션의 **모든 상태를 한 곳에서 관리하기 위한 '중앙 집중식 주방 시스템'**이에요. 

복잡한 앱에서 데이터가 여기저기 흩어져 관리되는 문제를 해결하기 위해 등장했어요.

---

어떤 역할인가요?: 

Redux라는 시스템 안에서 위에서 말한 Reducer를 핵심적인 부분으로 사용합니다. 

즉, Redux는 '레시피(Reducer)', '주문서(Action)', '주문 접수처(Dispatch)', '식료품 창고(Store)' 등을 하나의 큰 시스템으로 묶어서 앱 전체의 상태를 체계적으로 관리하게 해줘요. 

---

비유: 

Redux는 체계적인 **대규모 '중앙 주방 시스템'**에 해당합니다. 

이 주방 시스템은 '요리법(Reducer)'을 이용해서 다양한 요리를 만들고, '식료품 창고(Store)'에 재료(State)를 보관하며, '주문 접수처(Dispatch)'를 통해 손님(컴포넌트)의 요청(Action)을 처리해요. 

하지만 이 시스템을 처음 세팅하고 요리법들을 일일이 연결하는 과정이 좀 복잡할 수 있어요.

---

---

Redux Toolkit (리덕스 툴킷) - '자동화된 스마트 주방 도구'

---

무엇인가요?: 

Redux Toolkit은 Redux를 더 쉽고 효율적으로 사용하기 위해 만들어진 **'자동화된 스마트 주방 도구 모음'**이에요.  

Redux의 복잡하고 반복적인 설정 코드(boilerplate code)를 줄여주고, 모범 사례를 따를 수 있도록 도와줍니다. 

---

어떤 역할인가요?: 

Redux Toolkit은 Redux의 개념을 기반으로 하지만, createSlice 같은 유용한 함수들을 제공해서 Action 타입 정의, Action Creator 함수 생성, Reducer 작성 등의 작업을 한 번에 처리할 수 있게 해줍니다. 

---

비유: 

Redux Toolkit은 '스마트 냉장고', '자동 반죽기', '원터치 오븐'처럼 **주방 시스템(Redux)을 더욱 자동화하고 편리하게 만들어주는 '스마트 주방 도구들'**입니다. 

이 도구들 덕분에 '요리법(Reducer)'을 훨씬 빠르고 쉽게 작성하고, '주방 시스템(Redux)'을 효율적으로 운영할 수 있게 됩니다.

---

---

관계와 차이점 요약

---

---

핵심 관계: 

Reducer는 상태 변경의 '규칙'. 

Redux는 그 '규칙'을 활용해서 앱 전체 상태를 관리하는 '시스템'. 

Redux Toolkit은 그 '시스템'을 더 효율적이고 편하게 쓰도록 돕는 '도구'.

---

---

결론

---

결론적으로, Reducer는 Redux의 중요한 부품이고, Redux Toolkit은 Redux를 더욱 강력하고 사용하기 편리하게 만들어주는 도우미라고 이해하시면 됩니다. 

현대 React 프로젝트에서는 Redux를 사용한다면 대부분 Redux Toolkit과 함께 사용하는 것이 일반적입니다.

---

 

 

reducer-redux-reduxtoolkit.PNG

0.04MB