[1] Redux - 주요 개념 총정리

Redux를 모르고 어플리케이션을 개발하려고 했던 스스로에게 많은 반성을...
한 component의 state를 props로 줄줄이 자식에게 먹여주었던 미련함을 이젠 떨칠 필요가 있었다. 어플리케이션의 기능이 하나 둘 늘어갈수록 기하급수적으로 늘어나는 수고를 이젠 감당할 수 없었다고..

리덕스가 무엇인지, 그리고 어떻게 사용하는지 정리해보겠다.
그리고 후속편엔 리덕스를 리액트 네이티브에 어떻게 연결하는지 알아보겠다. 리액트 네이티브에 리덕스를 연결할 땐 제법 생소한 개념들이 쓰이기도 해서...

결국 최종목표는 이거다.
"state를 컴포넌트 내부말고 완전히 따로 저장해놓고 필요할 때 수정할거임.. "

리덕스의 전체 그림 (개요도)

from https://chanyeong.com/blog/post/21

0) store
Store에는 state가 보관되어있고, 여러가지 내장함수들이 포함되어있다. 현재 상태값을 불러오는 getState(), action을 운반하는 dispatch, 상태를 수정하는 reducer.. 등등이 담겨있다. 우선 모든 함수들을 구체적으로 알려고 노력하기 보다 전체적인 흐름을 보길 바란다.

1) state
state는 그냥 객체이다. 여기엔 온갖 잡다한 정보가 들어갈 수 있다. 사용자의 이메일이라든지, 성별이라든지, 누른 버튼이라든지.. 아무거나.
근데 이 state 를 update하는 행위는 매우 조심스럽게 이루어져야 한다. 그 이유는 javascript 의 immutability와 관계되어있다. 해당 내용에 대해서는

https://stackoverflow.com/questions/34385243/why-is-immutability-so-important-or-needed-in-javascript

를 참고하면 더 자세히 알 수 있다. 이에 대한 별도의 블로그 글도 곧 올리겠다.
아무튼 이 state는 되게 소중(?)하게 다루어져야 한다. 그래서 함부로 접근할 수 없고 reducer 라는 친구를 통해서만 수정 가능하다.

{ information: { }, sex: 'male', color:'yellow'}

2) reducer
이름이 왜 reducer인지는 모르겠으나 state를 수정할 수 있는 권한을 가진 유일한 함수이다. immutability를 고려하면 수정보다는 완전히 새로운 state로 기존의 state를 대체한다는게 더 맞는 표현인 것 같다.
reducer는 기존 state와 action을 파라미터 값으로 가져온다. 그리고 action의 종류에 따라서 반환할 새로운 state를 결정한다. 즉, reducer의 return 값은 기존 state를 대체할 새로운 state 라는 것! 아래는 reducer의 예시이다.

구조에 대해서는 이후에 살펴볼 예정이니 지금은 하는 역할만 알아두면 될 것 같다. action의 종류에 따라 새로운 state를 뱉는다!

const reducer = (state = initialState, action) => { 
 
  switch (action.type) {
    case "Order" :      //action의 type(종류)이 'Order'일때! 
     const Copy1 = Object.assign({}, state, ~); 
     return Copy1;    //새로운 state로 Copy1 반환 
    case "Pay": 
     return ~ 
    default: 
     return Object.assign({}, state);    //action에 해당되는게 없으면 기존 state반환
   }
} 

3) action
state를 수정하고 싶으면 reducer한테 이야기하라면서. 구체적으로 어떻게 수정하고 싶은데? 를 말해주는게 action이다. action도 그냥 객체인데, 이 안에는 type과 그 내용이 담겨있다. 이때 type 명시는 필수이다! 그래야 reducer가 명령을 알아먹고 state를 입맛대로 바꿔줄 수 있기 때문이다.

{ 
  type: "Order",
  food: {
  		  menu: "Pizza", 
          size: "Medium"... 
        } 
} 

4) dispatch
action이 저런 객체라고 한다면, reducer는 도대체 action을 어떻게 알아먹고 작동을 할까? 덩그러니 객체만 작성한다고 해서 reducer가 반응할리가 없으니까.
이때 등장하는 개념이 dispatch이다. 그냥 action을 태우고 다니는 함수라고 생각하면 된다. dispatch가 action을 태우면 reducer가 action을 알아먹고 action type에 따른 새로운 state를 뱉는다.

dispatch가 하는 일은 reducer에게 action을 넘겨주는 일이라고 보면 된다. javascript 코드는 매우 간단하다..

store.dispatch(action)  //이러면 reducer가 action 알아먹음. 

지금까지의 과정을 그림으로 간략하게 나타내면 다음과 같다.

from esri

그런데 이밖에도 getState() 와 subscribe 라는 함수가 있다.
하지만 이 둘은 매우 직관적이므로 짧은 설명만 덧붙이고 자세한건 이후의 글에서 다루겠다.
getState()는 말그대로 현재의 state를 받아오는 함수!

subscribe는 말그대로 구독인데, 이건 유투브 알림설정하고 비슷한 맥락이다. 새로운 영상이 올라오면 구독자에게 알림이 오는 것처럼, 바뀐 state가 있다면 해당 state를 쓴 component에게 rerender하라고 알림이 온다 (실제로는 rerender를 시켜주는 것)!