리덕스의 장단점 (redux 공부하기 #2)

필자는 리덕스에 대한 코드 스테이츠 과정에서 리덕스에 대해서 학습하였지만 코드로 구현하는 부분과 리덕스 코드를 이해하는 부분이 부족하다고 느껴져 '인프런에서 제로초님의 'Redux vs MobX (둘 다 배우자!)'라는 유료 강의를 결제해 공부하고 있다. 강의 특성상 MobX 내용이 포함되어 있지만, 시간 관계상 redux에 관한 내용 위주로 학습하려고 한다.

 

이 글의 목적은 강의를 수강하면서 학습한 내용을 이해 및 정리하고자 이렇게 글을 적게 되었다.

이번 기회를 통해 리덕스에 대해 제대로 이해해보고 프로젝트에서 사용한 리덕스 코드도 같이 이해하려고 한다.

(프로젝트 관련한 내용은 언급하지 않습니다)

 

 

source:  https://redux.js.org/

 

 

---

 

 

아래 이미지에 대해서 알아보자 💪🧐💪🧐💪🧐

 

store

리덕스는 store 중심으로 생각하는 게 좋다고 합니다. 

리덕스에서 store는 데이터 묶음으로 객체로 이루어져 있으며, 이 객체 안에 있는 데이터를 state라고 부릅니다.

 

action

action은 state를 어떻게 바꿀지 행동을 적어놓은 것입니다.

 

 

dispatch

dispatch는 action을 실행합니다.

 

 

reducer

action - dispatch가 실행이 되면, reducer에서 새로운 객체를 만들어내서 기존 state가 overwrite가 아닌 대체(replacement)됩니다.

 

 

middleware

* dispatch와 reducer 사이에 middleware가 낍니다. 

 

 

리덕스의 장점

단방향 모델링이라는 것이다.

단방향이란 것은 한 가지 방향으로만 바뀔 수 있다는 것이다.

 

단방향의 장점으로 action을 dispatch 할 때마다, history(기록)이 남아서 에러를 찾아낼 때 엄청 편하다고 합니다. 에러 또한 적게 난다고 합니다. 또한, 기록이 리스트 되어 있어서 time machine(타임머신) 기능을 사용할 수 있습니다.

 

 

 

리덕스 단점

리덕스의 단점으로 action을 미리 만들어 놓아야 하며, 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있기에 매번 state라는 객체를 만들어줘야 합니다.