<div id="readability-page-1" class="page"><div><p><span>
      <span></span>
  <img alt="리덕스 툴킷" title="리덕스 툴킷" src="https://kyun2da.dev/static/6a1eb1480c9d9549db4a1f9136f88b64/fc1a1/redux-toolkit.png" sizes="(max-width: 466px) 100vw, 466px" loading="lazy">
    </span></p>
<h2 id="서론"><a href="#%EC%84%9C%EB%A1%A0" aria-label="서론 permalink"></a>서론</h2>
<p>지난 포스팅에 이어 이번에는 리덕스의 일반적인 방법이 된 <a href="https://redux-toolkit.js.org/">리덕스 툴킷</a>에 대하여 알아보려고 한다. 이 글은 redux-toolkit 1.5.1 버전을 기반으로 쓰여진 글임을 미리 밝히는 바이다.</p>
<h2 id="리덕스-툴킷이란"><a href="#%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%88%B4%ED%82%B7%EC%9D%B4%EB%9E%80" aria-label="리덕스 툴킷이란 permalink"></a>리덕스 툴킷이란?</h2>
<p>리덕스 툴킷 라이브러리는 리덕스팀의 세가지 걱정을 해결하기 위해 등장하였다.</p>
<ol>
<li>리덕스 스토어를 구성하는 것은 너무 복잡하다.</li>
<li>리덕스가 유용해지려면 많은 패키지들을 추가로 설치해야한다.</li>
<li>리덕스는 너무 많은 보일러플레이트 코드를 요구한다.</li>
</ol>
<p>이 세가지를 해결한 것이 리덕스 툴킷이라는 라이브러리로 리덕스를 훨씬 쉽고 간편하게 사용할 수 있다. 이제 리덕스 툴킷을 어떻게 쓰는지 또, 어떻게 위의 문제점들을 해결했는지 살펴보도록 하자.</p>
<h2 id="리덕스-툴킷-사용법"><a href="#%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%88%B4%ED%82%B7-%EC%82%AC%EC%9A%A9%EB%B2%95" aria-label="리덕스 툴킷 사용법 permalink"></a>리덕스 툴킷 사용법</h2>
<p>먼저 패키지부터 설치하자.</p>
<p>리덕스 툴킷은 빌트인 타입스크립트이기 때문에 별도의 타입설치가 필요하지 않다.</p>
<div data-language="bash"><pre><code><span>npm</span> <span>install</span> @reduxjs/toolkit react-redux</code></pre></div>
<h2 id="리덕스-툴킷-api"><a href="#%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%88%B4%ED%82%B7-api" aria-label="리덕스 툴킷 api permalink"></a>리덕스 툴킷 api</h2>
<p>리덕스 툴킷 api는 크게 7가지가 있다.</p>
<ol>
<li><a href="https://redux-toolkit.js.org/api/configureStore">configureStore()</a> : 리덕스 createStore함수와 비슷한 함수로, 간단화된 구성 옵션과, 기본 구성을 제공한다. slice reducer를 자동으로 합치고, 미들웨어를 추가할 수 있으며, redux-thunk를 기본적으로 제공한다. 또한 redux devtools Extension 사용이 가능하다.</li>
<li><a href="https://redux-toolkit.js.org/api/createReducer">createReducer()</a> : 리듀서 함수를 switch 구문으로 쓰기보다는, 리듀서 함수를 계속쓰는 lookup table 방식을 쓸 수 있게 해주고, immer라이브러리가 내장되어 있어서 mutative한 코드를 작성할 수 있도록 해준다. ex) state.todos[3].completed = true</li>
<li><a href="https://redux-toolkit.js.org/api/createAction">createAction()</a> : 주어진 액션 타입 문자열로 액션 크리에이터 함수를 생성해준다. 함수 자체에 toString()이 정의되어 있어서 constant 타입 대신 사용이 가능하다.</li>
<li><a href="https://redux-toolkit.js.org/api/createSlice">createSlice()</a> : reducer 함수, slice 이름, 초깃값을 넣을 수 있고 action creator와 action type을 가진 slice reducer를 자동으로 생성해준다.</li>
<li><a href="https://redux-toolkit.js.org/api/createAsyncThunk">createAsyncThunk</a> : redux-thunk의 대체재</li>
<li><a href="https://redux-toolkit.js.org/api/createEntityAdapter">createEntityAdapter</a> : 스토어에서 정규화된 데이터를 관리하기 위해 재사용 가능한 리듀서 및 selector 집합을 생성한다.</li>
<li><a href="https://redux-toolkit.js.org/api/createSelector">createSelector</a> : <a href="https://github.com/reduxjs/reselect">reselect</a> 라이브러리의 유틸리티 기능과 똑같음</li>
</ol>
<p>여기서 일반적인 앱은 configureStore, createSlice 만으로 구현이 가능하다. 이제 예제를 통해 사용법을 살펴보자.</p>
<h2 id="리덕스-툴킷을-활용한-투두-카운터-구현"><a href="#%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%88%B4%ED%82%B7%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%88%AC%EB%91%90-%EC%B9%B4%EC%9A%B4%ED%84%B0-%EA%B5%AC%ED%98%84" aria-label="리덕스 툴킷을 활용한 투두 카운터 구현 permalink"></a>리덕스 툴킷을 활용한 투두 카운터 구현</h2>
<p>지난 시간에 리덕스에서 만들었던 투두리스트와 카운터 예제와 비교를 해보자.</p>
<ul>
<li><a href="https://stackblitz.com/edit/react-todo-counter-kyun?file=src/App.js">리덕스로 구현한 투두 카운터 예제</a></li>
<li><a href="https://stackblitz.com/edit/redux-toolkit-todo-counter-kyun?file=src/App.js">리덕스 툴킷으로 구현한 투두 카운터 예제</a></li>
</ul>
<p>먼저 라이브러리 종류가 확연하게 줄은 것을 확인할 수 있다. 기존에는 코드의 길이를 줄이고 가독성을 좋게하기 위해 immer와 redux-actions를 설치했지만 리덕스 툴킷을 사용하면 두 라이브러리를 사용하지 않고도 훨씬 짧은 코드를 짤 수 있었다. 또한 여기에는 추가하지 않았지만 미들웨어 설정과, Redux-thunk도 내장되어 있기 때문에 추가가 되더라도 더 짧고 가독성 좋은 코드를 쓸 수 있을 것이다.</p>
<p>모듈 폴더의 todos.js 파일을 각각 비교해보면 더 리덕스 툴킷의 위력이 나타난다. 기본 리덕스에서는 액션 타입, 액션 creator등을 따로 생성해줘야 했었지만 리덕스 툴킷에서는 <code>createSlice</code> 함수 하나로 모든 것이 구현 가능하다.</p>
<h2 id="리덕스-툴킷-장점-정리"><a href="#%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%88%B4%ED%82%B7-%EC%9E%A5%EC%A0%90-%EC%A0%95%EB%A6%AC" aria-label="리덕스 툴킷 장점 정리 permalink"></a>리덕스 툴킷 장점 정리</h2>
<ul>
<li>action type이나 action creator를 따로 생성해주지 않아도 된다.</li>
<li>미들웨어 추가가 편리하다.</li>
<li>immer가 내장되어 있어 mutable 객체를 사용해도 된다.</li>
<li>redux thunk가 내장되어 있어 비동기를 지원한다.</li>
<li>타입스크립트 지원이 잘된다.</li>
</ul>
<h2 id="마치며"><a href="#%EB%A7%88%EC%B9%98%EB%A9%B0" aria-label="마치며 permalink"></a>마치며</h2>
<p>이번에 토이프로젝트를 하면서 리덕스 툴킷으로 리펙토링을 하고 있는데 너무 편리해져서 리덕스를 더 좋아하게 된 것 같다. 좀더 많이 사용해보고 추가할 점이 있으면 추가해봐야겠다.</p>
<h2 id="참고"><a href="#%EC%B0%B8%EA%B3%A0" aria-label="참고 permalink"></a>참고</h2>
<ul>
<li><a href="https://redux-toolkit.js.org/">리덕스 툴킷 공식 문서</a></li>
<li><a href="https://velog.io/@velopert/using-redux-in-2021#redux-toolkit%EC%9D%80-%EC%9D%B4%EC%A0%9C-%ED%95%84%EC%88%98%ED%85%9C%EC%9E%85%EB%8B%88%EB%8B%A4">리덕스 어떻게 써야 잘썼다고 소문이 날까? - velopert</a></li>
</ul></div></div>

Kyun2da.dev

Kyun Heo

서론
지난 포스팅에 이어 이번에는 리덕스의 일반적인 방법이 된 리덕스 툴킷에 대하여 알아보려고 한다. 이 글은 redux-toolkit 1.5.1 버전을 기반으로 쓰여진 글임을 미리 밝히는 바이다.
리덕스 툴킷이란?
리덕스 툴킷 라이브러리는 리덕스팀의 세가지 걱정을 해결하기 위해 등장하였다.
리덕스 스토어를 구성하는 것은 너무 복잡하다.
리덕스가 유용해지려면 많은 패키지들을 추가로 설치해야한다.
리덕스는 너무 많은 보일러플레이트 코드를 요구한다.
이 세가지를 해결한 것이 리덕스 툴킷이라는 라이브러리로 리덕스를 훨씬 쉽고 간편하게 사용할 수 있다. 이제 리덕스 툴킷을 어떻게 쓰는지 또, 어떻게 위의 문제점들을 해결했는지 살펴보도록 하자.
리덕스 툴킷 사용법
먼저 패키지부터 설치하자.
리덕스 툴킷은 빌트인 타입스크립트이기 때문에 별도의 타입설치가 필요하지 않다.
npm install @reduxjs/toolkit react-redux
리덕스 툴킷 api
리덕스 툴킷 api는 크게 7가지가 있다.
configureStore() : 리덕스 createStore함수와 비슷한 함수로, 간단화된 구성 옵션과, 기본 구성을 제공한다. slice reducer를 자동으로 합치고, 미들웨어를 추가할 수 있으며, redux-thunk를 기본적으로 제공한다. 또한 redux devtools Extension 사용이 가능하다.
createReducer() : 리듀서 함수를 switch 구문으로 쓰기보다는, 리듀서 함수를 계속쓰는 lookup table 방식을 쓸 수 있게 해주고, immer라이브러리가 내장되어 있어서 mutative한 코드를 작성할 수 있도록 해준다. ex) state.todos[3].completed = true
createAction() : 주어진 액션 타입 문자열로 액션 크리에이터 함수를 생성해준다. 함수 자체에 toString()이 정의되어 있어서 constant 타입 대신 사용이 가능하다.
createSlice() : reducer 함수, slice 이름, 초깃값을 넣을 수 있고 action creator와 action type을 가진 slice reducer를 자동으로 생성해준다.
createAsyncThunk : redux-thunk의 대체재
createEntityAdapter : 스토어에서 정규화된 데이터를 관리하기 위해 재사용 가능한 리듀서 및 selector 집합을 생성한다.
createSelector : reselect 라이브러리의 유틸리티 기능과 똑같음
여기서 일반적인 앱은 configureStore, createSlice 만으로 구현이 가능하다. 이제 예제를 통해 사용법을 살펴보자.
리덕스 툴킷을 활용한 투두 카운터 구현
지난 시간에 리덕스에서 만들었던 투두리스트와 카운터 예제와 비교를 해보자.
리덕스로 구현한 투두 카운터 예제
리덕스 툴킷으로 구현한 투두 카운터 예제
먼저 라이브러리 종류가 확연하게 줄은 것을 확인할 수 있다. 기존에는 코드의 길이를 줄이고 가독성을 좋게하기 위해 immer와 redux-actions를 설치했지만 리덕스 툴킷을 사용하면 두 라이브러리를 사용하지 않고도 훨씬 짧은 코드를 짤 수 있었다. 또한 여기에는 추가하지 않았지만 미들웨어 설정과, Redux-thunk도 내장되어 있기 때문에 추가가 되더라도 더 짧고 가독성 좋은 코드를 쓸 수 있을 것이다.
모듈 폴더의 todos.js 파일을 각각 비교해보면 더 리덕스 툴킷의 위력이 나타난다. 기본 리덕스에서는 액션 타입, 액션 creator등을 따로 생성해줘야 했었지만 리덕스 툴킷에서는 createSlice 함수 하나로 모든 것이 구현 가능하다.
리덕스 툴킷 장점 정리
action type이나 action creator를 따로 생성해주지 않아도 된다.
미들웨어 추가가 편리하다.
immer가 내장되어 있어 mutable 객체를 사용해도 된다.
redux thunk가 내장되어 있어 비동기를 지원한다.
타입스크립트 지원이 잘된다.
마치며
이번에 토이프로젝트를 하면서 리덕스 툴킷으로 리펙토링을 하고 있는데 너무 편리해져서 리덕스를 더 좋아하게 된 것 같다. 좀더 많이 사용해보고 추가할 점이 있으면 추가해봐야겠다.
참고
리덕스 툴킷 공식 문서
리덕스 어떻게 써야 잘썼다고 소문이 날까? - velopert

리덕스 툴킷

댓글