Redux와 상태관리 복습.

Redux란 JS app들을 위한 예측가능한 상태의 저장소이다.

(SW의 가장 큰 위협은 complexity 즉 눈에 보이지 않는 복잡성이라 할 수 있고

개발자는 코드의 복잡성을 낮춰 app들이 예측 가능하게 할 필요가 있다.)

 

핵심은 store로 state라는 상태정보의 저장소역할을 한다.

상태관리 툴을 쓰지 않는 app들은 state에 직접 접근해 관리하나

Redux상에서 state는 오직 dispatcher과 reducer에 의해서만 작성, 수정(Write(Create), Update)이 가능하고 getState를 통해 Read를 수행한다.

이는 direct한 접근을 막으므로써 의도치않은 변화를 방지하고 예측가능하게 통제하는데 의미가 있다.

(이러한 특징으로 인해 UNDO,REDO를 쉽게 할수있다.)

또한 currentstate뿐만 아니라 이전의 state들도 recording해 문제해결을 용이하게 하기도 한다.

( immutable(불변성)을 지켜 object를 새로운 값으로 덮어씌우지 않기 때문에 가능하다.)

(각 상태가 독립성을 띄게 되고 이로써 상태복원을 가능하게 한다.)

(=> 희대의 사기 tool Redux-dev-tools의 시간여행)

 

<출처: 생활코딩(https://opentutorials.org/module/4078/24935)>

 

위 그림은 Redux에서 input과 output을 나타낸 일종의 지도이다.

 

1. submit이라는 상태변화가 일어나면 컴포넌트들은 props(객체data)를 store에 dispatch하고

2. dispatch는 현재 state값과 action data를 reducer에게 전달한다. 이는 state변경을 위함이며 state변경과 동시에 subscribe가 호출되고 render함수를 동작시켜 UI를 변경시킨다.

 (subscribe는 각 컴포넌트들이 state변화에 따라 내가 어떻게 변화해야 하는지 함수를 만들어 저장(구독)해놓는 곳이다.)

(입력단은 dispatch, 화면단은 subscribe에 신경쓴다.)

3. reducer는 state를 입력값으로 받고 action type을 참조해서 새로운 state값을 만들어 return해주는 상태 가공자이며

   각 컴포넌트들은 새로운state를 getState를 통해 얻을 수 있다.

4. 이렇게 얻은 새로운 state는 render함수에게 전달되고, render함수는 getState를 재실행하고 HTML의 UI를 변경한다.

 

이러한 Redux의 알고리즘은 컴포넌트들이 기존의 부모-자식 dependency에서 벗어나

1. 상태변화를 store에 알려주는 로직

2. 상태변화에 따라 UI를 변경하는 로직

두가지로 단순화 할수 있게 도와주었다.

 

즉 각 부품들이 자신의 일에만 집중할 수 있게 된 것이다.

(Redux를 통해 component들이 decoupling되어 stand alon하게 사용되는것이다.)

상태관리 라이브러리는 필수는 아니나 규모가 큰 앱일수록 있는게 편하다.

유지보수성이 높아지기 때문이다.

 

 

추후 공부할 것.

-immutable.js

-Redux console의 기능? middleware?

-Context API?

-MobX(불변성을 신경쓰지 않는다?)