상태 관리 라이브러리 - MobX (1. 개념과 설치)

[6.10.0 버전]

Mobx

MobX는 React와 함께 사용하는 상태 관리 라이브러리로, 애플리케이션의 상태를 관리하고 변화에 따라 UI를 업데이트하는데 도움을 주는 간단하고 강력한 라이브러리이다. MobX는 관찰 가능한 상태(Observable State)를 만들어두고, 이 상태에 의존하는 컴포넌트들은 자동으로 업데이트된다.

Mobx에서 추구하는 개발 철학은 아래와 같다. Mobx 공식문서에서 확인할 수 있다.

특징

1. Observable State
   MobX에서는 관찰 가능한 상태인 Observable State를 생성하여 상태의 변화를 감지한다.
   이는 일반적으로 js 객체, 배열, 맵 등을 관찰 가능한 형태로 만들어주며, MobX는 해당 상태를 자동으로 추적한다.

2. 자동 리액티브 업데이트(Reactive Updates)
   MobX는 상태의 변화를 추적하고, 해당 상태를 사용하는 컴포넌트들의 자동 리렌더링을 처리한다.
   상태가 변경되면 이와 관련된 컴포넌트들이 자동으로 업데이트되어 UI가 적절하게 반응한다.

3. 액션(Action)
   상태를 변경하는 함수들을 액션(Action)이라고 한다. MobX에서 상태를 변경하는 모든 작업은 액션 내에서 이루어져야 하고, 이를 통해 상태 변화를 추적하고 안전하게 업데이트할 수 있다.

4. 컴퓨티드 값(Computed Values):
   MobX는 컴퓨티드 값(Computed Values)를 지원하여, 하나 이상의 상태에 기반하여 계산되는 값들을 쉽게 생성할 수 있다. 컴퓨티드 값은 자동으로 캐싱되어 성능을 최적화한다.
   observable과 유사하지만, 유연한 개발을 위해 어떤 유일한 값을 리턴하기 위해 존재한다.

5. 리액터 컴포넌트(React Components):
   MobX는 React와 함께 사용하기 쉽도록 설계되었다. React 컴포넌트들을 관찰 가능한 상태와 연결하여 상태 변화에 따라 자동으로 업데이트되는 리액트 컴포넌트를 만들 수 있다.

설치

1. npm 설치
   npm install mobx mobx-react
   (functional component만 사용하는 경우, mobx-react-lite를 설치해도 된다.)

2. ts react를 사용하는 경우, tsconfig.json 파일의 "experimentalDecorators" 옵션과"useDefineForClassFields" 옵션을 true 로 설정한다.

사용 과정

1. 상태 관리하기
   MobX를 사용하기 위해 상태를 관찰 가능한 상태로 만들어야 한다. observable 데코레이터 또는 makeObservable() 함수를 사용하여 객체나 클래스를 관찰 가능한 상태로 만들 수 있다.

2. 액션 정의하기
   상태를 변경하는 작업은 액션 안에서 이루어져야 한다. action 데코레이터 또는 makeAutoObservable() 함수를 사용하여 액션을 정의할 수 있다.

3. react component 만들기
   상태와 연결된 리액터 컴포넌트를 만들기 위해 observer 데코레이터 또는 observer() 함수를 사용한다. 이를 통해 컴포넌트가 상태를 구독하고 상태 변화에 따라 자동으로 리렌더링된다.

4. 폴더 및 파일 제작
   mobx store을 관리하는 루트 폴더를 제작하여 그곳에서 store 파일들을 작성한다.