리덕스를 도입하는데 주저하게 만드는 장벽들

---

 

 

1. MobX

  데이터 처리속도가 빠르며, 쉽게 비동기를 처리할 수 있는 상태관리 도구이다. state를 관찰(Observable)하다가 변경이 되면 반응(Render)한다는 개념을 기반으로 동작하며, 자바 친화적인 표현법이 특징이다. 그러나 MobX의 데이터는 반응형으로 구성되어야 하기 때문에 프론트 엔드와 백엔드 간 데이터교환을 위해 Serialize-Deserialize 해야하는 단점이 있다. 데이터가 복잡한 구조일 수록 데이터 변환 작업에서 장애가 발생할 가능성이 커질 것이다. 또한 자체 엔진을 통해 데이터가 자동적으로 처리되므로 에러 발생 시 추적에 어려움이 있다.

 

2.  FLUX 

  FLUX란 데이터를 단방향으로 처리하자는 컨셉이다. FLUX에서 데이터는 항상 원본이 존재하고 원본을 하위 요소들에게 전파한다. 하위 요소에서 데이터의 변경을 요청하면(Action) 이를 처리한다. 즉, 데이터를 한 곳에서 저장하고, 처리하는 것이다. 이러한 데이터의 일관된 흐름으로 인해, 데이터에 문제가 생겼을 때 원본의 위치에서 수정을 하면 된다. 즉, 디버깅에 유리하다.

 

3. Redux

  FLUX의 컨셉이 적용된 대표적인 상태관리 라이브러리가 Redux이다. Redux에서는 Reducer에서만 데이터의 변형이 발생한다. Redux의 가장 큰 장점은 미들웨어이다. 미들웨어는 Action이 Dispatch된 후 Reducer로 전달되기 전에 추가적인 작업을 수행할 수 있게 해주는 도구이다. 미들웨어는 주로 비동기 작업을 처리하기 위해 사용된다. 

 

  대표적인 미들웨어 중 하나는 redux-saga이다. 비동기작업 후에 Dispatch를 해야하는 경우 비동기 작업이 진행상황(시작/종료/오류)에 따라 다른 Action값으로 Dispatch를 해야하며, API의 중복 호출을 방지하기 위해 기존 비동기 작업이 진행되고 있으면 기존 작업을 취소하고 새로운 Action 값을 이용하여 비동기 작업을 수행하는 등 복잡한 구성이 필요한 경우가 있다. 이러한 처리를 redux-saga를 이용하면 이를 간단하게 처리할 수 있어 효용성이 높다.

 

  Redux와 Redux 미들웨어는 복잡한 작업을 편리하게 해주는 반면, 간단한 작업에는 굳이 이들을 사용해야하나라는 의문이 든다. 로그인 창 하나를 만드는데 redux, redux-saga, redux-form... 등 어마무시한 설치과정을 거치는 것은 비효율적이 아닐까? 또한 라이브러리는 설치한다고 바로 되는 것이 아니라 사용법을 공부해야 적용할 수 있다.

 

  위 영상에서는 redux-saga 등의 미들웨어를 학습하는 대신, 순수 미들웨어 함수를 사용하는 것이 학습 장벽을 줄이고, 혼란을 줄여, 실무로의 적용속도가 더 빠르므로 이를 공부하는 것이 좋다고 이야기 한다.

 

4. Middleware

function middleware(store){
  return function(nextRunner) {
    return fnction(action){
      //Before Reducer
      const result = nextRunner(action); //Reducer 실행
      //after Reducer
      return result
    }
  }
}

  위 코드가 바로 미들웨어의 구조이다. 미들웨어가 다중으로 되어있다면 nextRunner가 다음 번의 미들웨어를 실행하게 된다. 

 

const thunk = (store) => (nextRunner) => (action) => {
  if(typeof action === 'function'){
    return action(store.dispatch, store.getState);
  }
  return nextRunner(action);
}

  redux-thunk라는 미들웨어는 위와같은 구조로 되어있다. action이 함수인 경우 action을 Reducer로 전달하지 않고,  action을 실행시킨다. 이 때 인자는 dispatch와 getState 함수이다. 따라서 action 함수 내에서는 비동기작업 수행 후 dispatch와 getState함수를 직접 실행할 수 있다.

 

5. Redux + Middleware

  Redux와 미들웨어를 이용하여 데이터를 단방향, 한 곳에서 처리한다면 다음과 같은 이점이 있다.

• 모든 데이터 흐름을 한 곳에서 감시할 수 있다.
• Redo/Undo 와 같은 histoty 관련 기능을 쉽게 구현할 수 있다.
• 미들웨어들이 각각의 비동기 작업의 상태를 감시하고 이를 처리하므로, 다중 비동기제어를 쉽게 구현할 수 있다.
  • 영속성: state를 갖는 컴포넌트가 사라지더라도 백그라운드에서 비동기 처리 진행 가능하며, 다시 컴포넌트가 생겼을 때 Loding 화면 혹은 결과 화면을 바로 출력하여 보여줄 수 있다.

6. 반복코드 줄이기

  Redux를 사용할 때 문제점 중 하나는 매번 Reducer와 Action를 작성하는 작업이 반복된다는 점이다. 이러한 부분들을 Reducer 생성함수, Action 생성함수를 따로 만들어서 사용하면 더 효율적으로 코딩을 할 수 있다.

 

---

  내가 이해하기에 이 영상의 결론은 redux와 연쇄적인 미들웨어를 구성하여 비동기작업과 이에 따른 상태변화를 쉽게 작성하고 관리할 수 있다는 것, 미들웨어를 사용할 때 라이브러리를 학습해서 사용하는 것 보다는 내가 필요한 미들웨어를 직접 구성하여 작성하는 것이 더 나을 수 있다는 것같다. 사실 어제 Redux를 처음 접해서 미들웨어를 연쇄적으로 적용시킬 수 있다는 것도 영상을 보며 처음 알았다. 하지만 Redux와 Middleware의 조합이 비동기적 처리와 관련된 상태관리에 있어 엄청 강력한 도구가 된다는 것은 느껴졌다. Middleware에 대해 더 알아보아야 겠다.