22.11.05 : Redux란 무엇인가요? 왜 사용하시나요?

Redux는 자바스크립트 앱을 위한 전역 상태관리 툴이다. 

나는 개발 공부를 시작한 뒤로 상태 개발 툴로는 아직까지 Redux, Redux toolkit 만을 사용해보았기 때문에 다른 상태관리 툴과는 아직 비교를 해 볼순 없지만, 일단 어떤 툴인지 더 자세히 알아보구 속속들이 파해쳐본 뒤, 다른 상태관리 툴도 사용해보고자 한다.

 

일단 Redux는 복잡해진 상태관리를 더 손쉽게 하기 위해서 존재한다. 상 하위 관계에 있는 컴포넌트들의 상태의존도가 높아지고, 자식 컴포넌트들이 너무 많아졌을때, 나는 Redux toolkit(RTK)을 사용했다. Redux는 전역상태관리툴 중 가장 많이 쓰이고있고, 커뮤니티도 크기 때문에 참고 할수있는 레퍼런스들이 가장 많다. 그중 Redux팀은 RTK를 로직을 작성하기 위한 툴로 공식적으로 추천하고 있음. 

 

RTK는 Redux의 세가지 문제점을 해결하기 위해 만들어졌다고 한다.

 

"저장소를 설정하는 것이 너무 복잡하다"

"쓸만하게 되려면 너무 많은 패키지들을 더 설치해야 한다"

"보일러플레이트 코드를 너무 많이 필요로 한다" 

Redux toolkit을 사용해야 하는 이유는 다음과 같다.

Redux의 기본 동작을 제공하고, 실수를 줄여주며, 더 간단한 코드를 작성하게 해 준다. 결국 코드가 더 좋고 유지보수하기 쉬워진다.

 

포함하는 것들:

configureStore(): createStore를 감싸 쓸만한 기본값들과 단순화된 설정을 제공한다. 리듀서 조각들을 자동으로 합쳐주고, 기본 제공되는 redux-thunk를 포함해 우리가 지정한 미들웨어들을 더해주고, Redux DevTools 확장을 사용할 수 있다.

createReducer(): switch 문을 작성하는 대신, 액션 타입과 리듀서 함수를 연결해주는 목록을 작성하도록 한다. 여기에 immer 라이브러리를 자동 사용, state.todos[3].completed  = true 같은 변이 코드를 통해 간편하게 불변 업데이트를 할 수 있도록 한다.

createAction(): 주어진 액션 타입 문자열을 이용해 액션 생산자 함수를 만들어준다. 함수 자체에 toString() 정의가 포함되어 있어서, 타입 상수가 필요한 곳에 사용할 수 있다.

createSlice(): 조각이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아 그에 맞는 액션 생산자와 액션타임을 포함하는 리듀서 조각을 자동으로 만들어준다. 

createAsyncThunk: 액션 타입 문자열과 프로미스를 반환하는 함수를 받아, pending/fulfilled/rejected 액션 타입을 디스패치해주는 thunk를 생성해준다. 

createEntityAdapter: 저장소 내에 정규화된 데이터를 다루기 위한 리듀서와 셀렉터를 만들어준다.

createSelector: 유틸리티를 Reselect 라이브러리에서 다시 익스포트해서 쓰기 쉽게 해줌.

RTK Query 데이터 패치 API: Redux에서 데이터를 가져오고 캐싱하기 위한 도구. 웹 애플리케이션에서 데이터를 불러오는 일반적인 경우에 패치와 캐시 로직을 직접 작성해야 할 필요를 없애준다.

 

 

 

Reference
https://ko.redux.js.org/redux-toolkit/overview

Redux Toolkit: 개요 | Redux