[TIL] Redux 구조 공부

redux 란

redux는 상태관리도구 입니다. vuex, mobx과 비슷합니다. 상태관리도구는 프론트엔드에서 컴포넌트간의 데이터 전달을 돕는것이라 생각하면 이해하기 수월합니다. vue나 react 와같은 경우,
(1) 컴포넌트 재사용을 위해,
(2) 상태변화가 일어날때 컴포넌트 단위만 변하게하여 성능 향상을 위해
(3)등등... 참고->컴포넌트를 여러 컴포넌트로 나눠야 할 때

이러한 이유들로 컴포넌트를 쪼개게 되는데 이 쪼갠 컴포넌트들 사이의 데이터 전달이 프레임워크별로 방법이 존재합니다. vue와 같은 경우 상위->하위 컴포넌트로 데이터 전달할땐, props를 통해 전달하고, 하위->상위 컴포넌트로 데이터를 전달할땐, event ($emit)을 통하여 전달하게 됩니다.

vue의 예시

가벼운 전달에는 상관이 없지만 큰 페이지를 만들때, 다양한 단위로 쪼개게 되고 많은 데이터 전달을 관리하기가 쉽지않을 것입니다. 이럴때 사용하는게 상태관리도구입니다.
컴포넌트가 local variable이라면 상태관리도구위에 있는 store는 global variable이라고 생각하면 이해하기 쉽습니다.

vuex

redux

redux의 기본 사용방법

상태 (State)

Store에 있는 데이터 집합입니다. global variable이라 생각하면 편하지만 state는 직접 접근하여 변경하면 안됩니다.

스토어 (Store)

state 관리를 하는 장소라 입니다. 현재의 state 상태와 리듀서가 들어 있습니다. state들이 store에 객체형태로 저장되어 있습니다.

리듀서 (Reducer)

store의 state를 업데이트하기 위해 사용됩니다. action과 state를 통해 새로운 state를 만듭니다. 따라서 action과 state를 이어주는 다리와 같은 역할이라 생각합니다.

액션 (Action)

상태변경을 일으키는 함수 입니다. action은 reducer 실행을 위한 데이터를 전달하는 역할입니다.

요약