[노마드코더] Redux 101 - 마지막

[참고]https://nomadcoders.co

노마드 코더 Nomad Coders

Redux 개선

문제 : 과연 Redux를 사용했을 때 코드가 줄었을까? 더 복잡해 보인다.

해결 : Redux Toolkit

 

yarn add reduxjs/toolkit

 

1. createAction

reducer에 Action을 보낼 때 직접 action Object를 정의해서 보내주던 과정을 createAction을 사용해서 정해진 형태로 바꿀 수 있다.

{type: "", payload: ""}

 

createAction을 사용했을 때 코드의 양 차이

2. createReducer

Reducer 함수를 switch - case문 없이 단순하게 파라미터를 이용해 구현할 수 있게 해준다.

또한 중요한 점은 State를 Mutate(변형)할 수 있게 해준다.

이전에는 새로운 state를 만들어서 return 해줬지만,

createReducer 함수를 사용하면 Immer가 state를 변경하는 것을 도맡아 해주기 때문에 state.push가 가능해진다.

createReducer에서는 새로운 state를 만들어 return하거나 return하지 않고 state를 mutate하거나 둘 중에 선택해야 한다.

createAction + createReducer를 사용했을 때 코드 차이

반응형

3. configureStore

Redux Developer Tool(Google Chrome Extension)을 사용할 수 있게 해준다.

Redux Developer Tool은 Redux를 사용하는 모든 웹사이트의 State를 볼 수 있고, dispatch를 보낼 수도 있는 등 여러 유용한 기능들이 많다.

Redux toolkit를 설치할 필요 없다. configureStore함수로 store 생성 시 자동으로 실행된다.

 

4. createSlice

Reducer와 Action을 모두 한 함수에 포함할 수 있는 함수이다.

파라미터로 옵션들을 담은 객체를 넘기면 알아서 reducer와 action을 만들어주는 편리한 함수이다.

createAction + createReducer = createSlice 라고 생각하면 될 듯 하다.

action의 type과 payload 키값이 그대로 적용되는 것을 보니 createAction과 동일하게 정해진 형태인 것 같다.

reducers 옵션에 정의된 함수의 이름을 컴포넌트에서 그대로 적용할 수 있어 코드가 정말 깔끔해진다.

 

최종 코드 최적화 결과 약 40line -> 16line

결론

처음에 Redux를 배우면서 아직 자바스크립트 ES6 문법도 잘 모르다보니 코드가 어디로 흘러가는지 이해하기 어려운 부분이 있었지만,

차근차근 따라가고 멈춰서 생각하다보니 점점 이해가 된다.

 

Vanila JS로 먼저 구현한 간단한 프로젝트를 Redux로 다시 구현해보면서 차이점을 직접 느낄 수 있다는 점이 가장 만족스럽고 좋았다.

Redux를 사용하는 이유와 기본 원리에 대해 더 잘 알 수 있었다.

 

Toolkit을 이용하기 전에는 무언가 더 구조적이고 관리하기는 좋을 것 같긴한데 코드가 깔끔하고 효율적인지에 대해서는 의문이 들었지만

마지막에 Redux Toolkit을 이용해 앞선 Redux 코드들을 최적화 하면서 왜 Redux를 사용하는지 한번 더 와닿았다.

 

자바스크립트로 개인 프로젝트를 진행할 일이 있을 때 Redux를 사용해보는 것이 좋은 공부가 될 것 같다.