Redux | 구현의 흐름

Redux 구현의 흐름

redux를 사용하려면 어떻게 할까?

정형화된 순서가 있는 것도 아니고 사람마다 또 개발 환경마다 천지차이를 보이겠지만 나에게는 어느정도 가이드라인이 필요할 것 같아서 정리를 해보려고 한다.

 

컴포넌트를 설계하고 Redux를 활용한 상태관리까지 구현하고자 할 때 개발의 순서는 아래와 같을 수 있다.

 

(단계별 구체적인 코드나 예제는 제외했다. Redux 사용의 큰 흐름만 잡는 것이 이 글의 목적이다.)

---

1. 부품화(컴포넌트화)

재사용과 가독성을 위해 구현하고자 하는 여러 기능들을 컴포넌트화 한다. 주로 기능별 jsx, js 파일을 분리하는 식으로 이뤄진다.

 

2. Reducer 정의 및 Store 생성하기

우리는 한 Application 내에서 흐름을 쉽게 파악하기 위해 하나의 store만 유지하게 된다. Redux.createStore(reducer)로 관리할 정보(state)를 생성하고 이 정보들을 가공할 함수 공장(reducer)도 정의해준다.

 

이때 state의 초기값은 따로 변수에 저장해둬도 되지만, reducer 함수 안에서 최초의 마운팅 시점에 undefined로 판단될 state를 초기화 해줄 수도 있다.

 

reducer 함수는 현재 state 값과 action 객체를 전달인자로 받는다. 함수 내에는  action 객체의 타입별 수행할 여러 기능(state 가공 기능)을 구현해둔다. 주로 CRUD의 실기능이 여기서 구현된다.

 

※  reducer 내에서 기능 구현시, redux의 time-traveling 기능을 활용하려면 원본 state를 직접적으로 변경해서는 안된다. state 원본 값은 직접 건들여서 return하지 말고, 새로운 변수에 state 값을 복사한 뒤 그 변수의 값을 수정해서 return 하는 것이 좋다.

 

3. action 객체 정의

dispatch 함수 호출 시  reducer에게 전달할 action 객체는 어떤 구성일까?

 

action 객체의 프로퍼티 중 type은 반드시 정의해야 하고, state를 가공할 여러 기능을 수행하려면 기능별 어떤 data가 필요할 지 생각해야 한다.

 

이를 dispatch 라는 징검다리를 통해 reducer가 캐치하게 된다.
 reducer는 action 객체를 받아 다음으로 지정할 state 값을 리턴한다.

 

4. subscribe

store.subscribe(render)로 UI 구현을 담당하는 함수인 render를 store에 등록해줘야 한다. 그래야 state 값이 변경될 때마다 리렌더링이 수행되고 적용된 결과를 눈으로 확인할 수 있다.

 

---

Redux를 사용해야 하는 이유?

subscribe된 렌더들과 state를 공유하는 컴포넌트들 사이에는 낮은 결합도(decoupling)가 생기게 된다. 이제, 각 컴포넌트들은 stand alone 할 수 있게 되었다.

 

각 부품들이 서로에 대해 알 필요 없이, 서로의 존재를 인지하지 않아도, 하나의 state를 공유하고 가공하면서 원하는 기능을 수행할 수 있게 된 것이다.