[FE 개념]리덕스 vs 모벡스 정리

React x Mobx

- 참고할 저장소 코드: https://github.com/goodsosbva/react_redux/tree/main/redux-mobx

1. 리덕스 x 리액트 응용 방법

리덕스의 기본 원리는 다음과 같습니다:

1. state -> dispatch: 적절한 dispatch 명령을 Action 함수에 받아들입니다.
2. Reducer에서 해당 액션을 수용하여 state를 변경합니다 (prevState -> changedState).

생성 흐름은 다음과 같습니다:

1. createStore: 스토어를 생성합니다.
2. Reducer 생성: 상태 변경을 수행하는 리듀서를 생성합니다.
3. 초기 state 설정: 스토어의 초기 상태를 설정합니다.
4. state 생성: 리듀서와 초기 상태를 사용하여 상태를 생성합니다.
5. 액션 생성자 생성 (필수는 아닙니다): 필요한 경우 액션 생성자 함수를 생성합니다.
6. dispatch: 액션을 디스패치하여 상태 변경을 요청합니다.
7. 리듀서가 인식하여 state 변경: 디스패치된 액션을 리듀서가 인식하고 상태를 변경합니다.

2. 리덕스 편의성 제공 - 1 (immer)

리덕스에서 편의성을 제공하기 위해 immer라는 라이브러리를 사용할 수 있습니다. immer를 사용하면 간단한 골격으로 다음과 같이 상태를 변경할 수 있습니다:

nextState = produce(prevState, (draft) => {
  // [기본 리듀서 위치]
});

이를 활용하면 불변성을 지키면서도 더 간편하게 상태를 변경할 수 있습니다.

3. 리덕스 편의성 제공 - 2 (redux-toolkit)

redux-toolkit은 리덕스의 편의성을 높여주는 패키지입니다. redux-toolkit에서 주요한 메서드는 다음과 같습니다:

• 스토어 설정: configureStore, getDefaultMiddleware, immutabilityMiddleware, serializabilityMiddleware
• 리듀서와 액션 생성자: createSlice, createAsyncThunk

2. Mobx의 기본 원리

Mobx는 상태를 관리하는 방식이 리덕스와 다릅니다:

• state -> action: 상태를 직접 변경할 수 있으며, 리덕스와 큰 차이점입니다.
• 예시: state.id = 'goodsosbva'와 같이 직접 객체의 속성을 변경한 다음, observable로 객체를 감싸면 Mobx가 옵저버가 상태를 관리합니다.

주요한 메서드로는 Observable, reaction, action, autorun, reaction 등이 있습니다.

2-1. Mobx vs Redux 차이점

리덕스는 불변성을 지키는 것이 원칙이며, 상태를 변경할 때 얕은 복사를 통해 새로운 상태를 생성하여 변화된 값을 치환합니다. 반면에 Mobx는 리덕스처럼 엄격하게 불변성을 지키지 않습니다. 그렇기 때문에 Mobx에서는 액션을 만들 필요 없이 observable로 감싼 객체를 직접 변경하여 전역 상태를 관리할 수 있습니다. 이로 인해 코드 작성이 간편해집니다.