[Redux] Redux에 대해서

0️⃣ Redux가 뭘까?

Redux의 공식 문서에 따르면 Redux는 자바스크립트로 만든 애플리케이션을 위한 예측 가능한 상태의 저장소라고 한다. 그렇다면 이 Redux를 왜 사용하는 것일까? 그 이유는 애플리케이션의 복잡성을 낮춰서 우리의 코드가 어떤 결과를 가져올지 예측 가능하게 만들어주기 위해서 이다.

---

1️⃣ Redux를 왜 사용할까?

1) Redux를 이용하면 애플리케이션에서 필요한 데이터를 중앙 집중적으로 관리할 수 있다.

2) state를 외부로 부터 차단시켜서 데이를 관리한다. 즉, Redux의 기능을 통해서만 데이터 읽기, 수정이 가능한 것이다.

---

• 이처럼 데이터를 외부에서 직접적으로 제어할 수 없도록 하는 것을 통해서 의도하지 않게 state 값이 바뀌는 문제를 사전에 차단한다. 이를 통해서 우리의 애플리케이션을 보다 예측 가능하게 만들어 주는 것이다.

 

• 각각의 state 값들을 생성할 때, 철저하게 통제하고 데이터를 만들 때 원본을 바꾸는 것이 아니라 원본을 복제하고 복제한 데이터를 수정하고 그것을 새로운 원본으로 만드는 방법을 채택하기 때문에 각각의 상태 변화가 서로에게 영향을 전혀 주지 않는 독립된 형태로 유지할 수 있고, 이러한 특징을 이용하여 UNDO, REDO와 같이 애플리케이션의 상태를 바꾸는 것을 쉽게 처리할 수 있다.

 

• Redux의 이러한 특성들을 이용하면 module reloading이란 것을 할 수 있는데, 코드를 작성하면 자동으로 코드가 애플리케이션에 반영되는 것이다. hot module reloading 이란 것을 이용하면 애플리케이션은 리로딩되는데 데이터는 그대로 남아 있기 때문에 다시 입력 작업을 할 필요가 없도록 개발 환경을 세팅할 수 있다.

 

• 개발을 할 때 디버거를 통해서 애플리케이션의 현재 상태를 볼 수 있는데, Redux를 이용하면 현재 상태뿐만 아니라 이전의 상태까지도 리코딩하는 것을 통해서 만약 문제가 발생했을 때 과거의 문제의 시점으로 돌아가 문제 해결을 훨씬 더 쉽게 할 수 있도록 도와준다.

---

2️⃣ Redux는 어떻게 작동할까?

 위의 그림은 redux 의 동작 과정을 도식화하여 나타낸 것이다. 해당 그림은 1,2,3 순서대로 진행되는 로직이다. 각각을 하나씩 정리해보겠다.

💡 store (물류 공장)

 먼저 redux 의 핵심은 store로 데이터를 갖고 있는 물류 창고라고 보면 된다. store는 정보가 저장되는 공간으로, store 안에 실제 정보는 state에 저장된다. state에 직접 접근하는 것은 금지되어 있고 dispatch와 같은 내장 함수를 통해서 접근해야 한다.

💡 dispatch (물류 공장 감독관)

dispatch는 물류 창고 감독관의 역할을 한다. 상부에서 받은 제조법(action)를 토대로 작업을 지시하게 된다. 두 가지 작업을 지시하게 되는데

• 첫 번째로, dispatch는 제조법(action)을 전달 받아서 reducer라는 직원에게 2가지 값을 전달해주게 되는데 하나는 가공되지 않은 물품(현재의 state 값), 하나는 제조법(action) 이다.
• 두번째로, subscribe라는 직원에게 반복 생산(render 함수 호출을 통한 화면 갱신)을 지시한다.

💡 reducer (물품 제조업자)

 물품 제조업자인 reducer는 물류 공장(store)의 물품(state)값을 변경해주는 역할을 담당한다. 그렇다면 어떻게 변경해주게 될까? 먼저 이전의 물품(state)와 제조법(action)을 받아서 새로운 물품(state)값을 return 해주게 되고, 그 return된 값이 새로운 state값이 되어 state의 값이 변경되는 것이다.

💡 subscribe (반복 생산 담당자)

subscribe는 반복 생산을 담당하는 직원이다. 이 직원은 dispatch에게 작업을 지시받고, 발송(render) 함수를 호출하게 된다.

💡 render (발송 기계)

render는 발송 기계로서 신제품 발송 업체인 getState를 통해서 신제품(state)값을 받아서 UI를 만드는 함수이다.

💡 getState (신제품 발송 업체)

 신제품 발송 업체인 getState는 신 제품(state)값을 가져와서 발송 기계(render)에 전달해준다.