React.js - redux toolkit- 리덕스툴킷

Redux Toolkit(리덕스 툴킷)이란 무엇인가요?

---

Redux Toolkit은 Redux(리덕스)를 더 쉽고 효율적으로 사용하기 위해 만들어진 **공식적으로 권장하는 '도구 모음'**입니다.  

Redux 자체는 강력하지만, 설정하고 사용하는 과정이 다소 복잡하고 반복적인 코드(boilerplate code)가 많다는 단점이 있었어요. 

Redux Toolkit은 이런 문제점을 해결해줍니다.

---

비유를 해볼까요?

우리가 고급 식당의 **'중앙 주방 시스템'**을 구축한다고 상상해 보세요. 

이 시스템은 식료품 관리(State), 주문 처리(Action), 요리법 적용(Reducer) 등을 체계적으로 해야 하죠. 

이게 바로 Redux입니다.

그런데 처음 이 주방 시스템을 만들고 운영하려면, 아주 복잡한 매뉴얼을 보고 모든 것을 수작업으로 해야 했습니다. (이것이 과거의 일반 Redux)

이때 등장한 Redux Toolkit은 마치 **'최첨단 자동화 주방 기기 세트'**와 같아요.

---

복잡한 전기 배선(설정)을 알아서 다 해주고
재료 손질(Action 생성)도 원터치로 해주며
요리법(Reducer)도 쉽게 작성할 수 있게 템플릿을 제공하는 거죠.

 

---

이 도구들 덕분에 주방 시스템(Redux)을 처음부터 효율적으로 만들고 운영하는 것이 훨씬 쉬워집니다.

 

---

---

다이어그램으로 이해하기

---

설명을 정말 잘해 놓은 포스팅을 발견 했습니다.

소개 합니다.

 

블로그 가서 땡큐 남겨주세요.

 

https://velog.io/@sweet_pumpkin/%EB%AC%B4%EC%9E%91%EC%A0%95%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%B5%9C%EA%B3%A0-%EB%A6%AC%EB%8D%95%EC%8A%A4%EC%95%BC-%EA%B3%A0%EB%A7%99%EB%8B%A4-Redux-Redux-Toolkit-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

최고 리덕스야 고맙다! Redux & Redux Toolkit 알아보기

---

---

Redux Toolkit이 왜 필요한가요? (장점)

---

복잡성 감소 (No More Boilerplate!): 

Redux를 사용하려면 Action 타입 정의, Action Creator 함수 생성, Reducer 작성 등 여러 단계를 거쳐야 했습니다. 

Redux Toolkit은 createSlice 같은 함수를 통해 이 과정을 자동화하여 코드의 양을 획기적으로 줄여줍니다.  

 

---

설정 간소화: 

configureStore 함수를 사용하여 Redux Store 설정 과정을 매우 간편하게 만들어줍니다. 

미들웨어(예: Redux Thunk)나 개발 도구(Redux DevTools) 설정도 기본적으로 포함되어 있어요.

 

---

모범 사례 제공: 

Redux 개발팀에서 직접 만들고 권장하는 도구이기 때문에, 최신 권장 사항과 모범 사례를 따르는 코드를 자연스럽게 작성할 수 있습니다.

 

---

불변성 관리 용이: 

createSlice 내부에서 Immer 라이브러리를 사용하여, 상태를 불변하게 관리해야 하는 Redux의 규칙을 개발자가 더욱 쉽게 지킬 수 있도록 도와줍니다. 

마치 직접 불변 객체를 만들지 않아도 되는 편리함을 제공하죠.

---

---

Redux Toolkit의 주요 기능

---

configureStore: 

Redux Store를 쉽게 설정하고 생성하는 함수입니다.

크리에잇슬라이스 결과가 하나의 슬라이스입니다.

크리에잇슬라이스가 많이 필요하다면 그것을 각각 슬라이스로 만들면 됩니다.

스토어 하나에 기능을 하나만 넣어도 됩니다.

그런데 스토어 하나에 여러 기능을 넣고 싶다면 그것을 여러개의 슬라이스로 만듭니다.

그 여러개의 슬라이스를 하나의 스토어로 만들어 주는 아이가 컨피규어스토어입니다.

---

createSlice: 

액션 타입, 액션 생성자, 리듀서까지 한 번에 정의할 수 있는 함수입니다. 

이것이 Redux Toolkit의 가장 핵심적인 기능 중 하나입니다.

하나의 스토어에 작은 스토어 여러개도 담을 수 있습니다.

이 기능을 슬라이스라고 합니다.

이런 슬라이스 기능이 가능하도록 옆에서 조용히 도와 주는 아이가 리덕스툴킷 입니다.

즉, 여러개의 슬라이스를 하나의 스토어로 콘트롤 하는 아이는 컨피규어스토어

여러개의 스토어를 하나의 스토어로 콘트롤 하는 아이가 리덕스툴킷입니다.

---

createAsyncThunk: 

비동기 로직(API 호출 등)을 처리하는 Thunk를 간편하게 생성할 수 있게 돕는 함수입니다.

---

---

결론

---

Redux Toolkit은 Redux의 강력한 상태 관리 기능을 유지하면서도, 그 복잡성과 개발 난이도를 대폭 낮춰주는 혁신적인 도구입니다. 

**현대 React 프로젝트에서 Redux를 사용한다면 Redux Toolkit은 거의 필수적으로 함께 사용되는 '표준'**으로 자리 잡았습니다. 

Redux의 이점을 누리면서도 훨씬 빠르고 간결하게 개발할 수 있게 되는 것이죠.

---

---

리덕스툴킷을 사용하는 몇가지 방법

---

npx create-react-app my-app --template redux

 

크리에잇 리액트 앱 인스톨 할 때 같이 하기

---

npm install @reduxjs/toolkit

 

진행중인 프로젝트에 설치

---

@reduxjs/toolkit

 

코드샌드박스 dependencies install

---

ver error

 

인스톨 안되면

pacage.json 열어 보세요.

"react"
"react-dom" 
항목의 버전이 18.1.x 이상이어야 사용가능합니다. 

이하 버전이면 몰래 살짝 업그레이드 해주면 됩니다.

실무에서 옛날 프로젝트 유지보수 하는 경우 발생 할 수 있는 상황입니다.

---

---

React 프로젝트에서 Redux Toolkit을 설치하면 Redux는 별도로 설치할 필요가 없습니다.

 

Redux Toolkit (@reduxjs/toolkit):
이 패키지는 Redux 애플리케이션의 로직(액션, 리듀서, 스토어 설정)을 작성하는 데 필요한 도구들의 모음입니다.
Redux 코어 라이브러리를 포함하고 있으므로 redux 패키지를 따로 설치할 필요가 없습니다.

React-Redux (react-redux):
이 패키지는 React 컴포넌트와 Redux 스토어를 연결하는 데 필요한 역할을 합니다.
Redux 스토어의 상태를 React 컴포넌트에 주입하고, 컴포넌트에서 액션을 디스패치할 수 있게 해주는 Provider, useSelector, useDispatch 같은 훅들을 제공합니다.
Redux Toolkit과는 별개의 역할을 수행하는 독립적인 라이브러리입니다.

---