[Redux] 리덕스란?

 

* 왜 리덕스를 사용하는가

from KoreaBizWire

버스 하차 벨을 생각해보자. 버튼을 누르면 삐- 소리가 나면서 동시에 버스 내에 있는 모든 벨에 빨간 불이 들어온다. 버튼을 한 번 눌렀는데, 모든 벨의 색깔이 변화하는 것이다. 

버스 하차벨처럼 한 칸의 버튼을 클릭하면 나머지 칸의 색이 따라 바뀌는 화면은 어떻게 만들 수 있을까? 

 

 

먼저 '빨강' 버튼을 누르면 모든 화면이 빨갛게 변하는 화면을 생각해보자.  먼저 (1) 'red' 자신의 색을 빨갛게 바꾸는 코드, (2) 'green'의 색을 빨갛게 만드는 코드, (3) 마지막으로 'blue' 의 색을 빨갛게 바꾸는 코드가 필요하다. 총 세 번의 코딩을 해야 한다.

 

 

마찬가지로 모든 칸을 초록으로 만들 때도 세 번, 모든 칸을 파랗게 만들 때도 세 번의 코드작업이 필요하다. 위 화면을 만들기 위해 총 아홉 번의 작업이 필요한 것이다. 만약에 색이 세 가지가 아니라 열 가지라면 백 번의 작업을 해야 한다. 색이 열 가지가 아니라 백 가지라면?

각의 요소는 상호간 가깝게 연결(커플링)되어 있다. 따라서 한 가지를 수정하면 나머지도 같이 바꿔주어야 하는 불편함이 있다. 

 

-

이를 해결하기 위한 것이 리덕스(Redux)다. 리덕스는 모든 상태정보(state)를 중앙(store)에 저장해놓고, 상태변경이 필요한 부분만 중앙에서 상태정보를 가져오도록 할 수 있다. 요소간 연결이 훨씬 느슨해진 것(디커플링)이다.

 

리덕스를 설명하는 방법 하나는 '소문'과 '언론' 으로 이해하는 것이다(생활코딩). 먼저 리덕스가 없는 상태를 '소문'이라고 볼 수 있다. 내가 정보 하나를 바꾸기 위해서는 나와 연결된 모든 사람들에게 소문을 내야 한다. 소문이 필요 없는 사람들까지도 몇 단계에 걸쳐 해당 정보를 받게 된다.

 

반면, 리덕스는 일종의 '언론사' 역할을 한다. 모든 사람에게 정보를 주는 것이 아니라 구독자(subscribe)에게만 정보를 전달한다. 정보를 제보하고 싶은 사람은 온 세상에 소문낼 필요 없이 언론사에게 직접 제보하고 싶은 내용(action)을 전달해주면 된다. 정보의 전달과 배포가 훨씬 간편해진 것이다. 

 

-

위의 코드로 돌아가보자. Red, Green, Blue를 커플링시키는 대신, 리덕스를 사용해서 중앙에서 상태를 관리한다면 어떨까. 예를 들어, Red의 상태가 변경되었다면 중앙(store)에 알리고, 중앙에서는 나머지 요소들(subscribers)에게 상태의 변경을 알리는 것이다. 그렇다면 Red, Green, Blue 는 상호 연결되지 않더라도 중앙을 통해서 상태 변경을 통지받고, 그에 따른 행동을 취할 수 있게 된다. 

 

* 리덕스는 어떻게 돌아가는가

 

 

1) Store : 상태를 관리하는 중앙 저장소 역할. 스토어는 하나만 있는 것이 권장된다. 스토어가 여러 개이면 굳이 리덕스를 쓰는 의미가 없다.

2) State : 중앙에서 관리되는 상태 정보. State를 직접 수정하면 안 되며, 리듀서(Reducer)를 통해서만 변경되어야 한다.

3) Reducer : State를 변경하는 함수로, State와 Action이라는 두 개의 인자를 받는다. 기존의 State를 변경하는 것이 아니라 Object.assign()을 이용해서 기존 함수를 복제한 후 변경할 부분만 추가로 변경하여 새로운 State를 리턴한다. 각 State는 독립적으로 존재하기 때문에 Redo/Undo 작업이 용이해진다. 
4) Render/getState : 리덕스 내의 요소는 아니다. Store 내부에 있는 State를 getState() 메소드를 통해 요청하고 받아온다. 

5) Action : State에 변화가 필요할 때 발생되는 객체. State에서 변경되는 내용을 담고 있다. Action 내부에는 꼭 type 이라는 프로퍼티가 있어야 한다. 

6) Dispatch : 함수로, 두 가지 역할을 한다. 먼저 Action을 인자로 받아 Reducer에게 넘겨준다. 또한, Subscribe에게 State의 변경을 알려준다.

7) Subscribe : 상태가 변경되면 Subscribe에 등록된 함수들을 실행시킨다. 위 경우에서는 render가 subscribe되어 상태가 변경될 때마다 새로 렌더링이 될 것이다. 

 

 

 

(* 강의 내용 정리차 적은 것이므로, 틀린 부분이 있을 수 있습니다. 발견하신 경우 말씀해주시면 감사하겠습니다! )

 

* Reference : 생활코딩 (https://www.youtube.com/watch?v=dRcahbiS5zk&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=18)