React 상태관리 MobX

useState를 사용해서 API 호출 결과를 관리하려고 했는데, 브라우저가 먹통(?)이 돼버렸다... 상태 변경 후에 업데이트 돼야 하는 컴포넌트가 렌더링 되지 않아서 그런가 싶었다.. 

사수분께서 MobX를 사용하면 될 것 같다고 말씀해주셔서 도움을 받았다 ..!

 

MobX 주요 개념

Observable State (관찰받고 있는 상태)

- 상태의 변경이 있으면 MobX에서 관찰하고 있다가 어느 부분이 바뀌었는지 파악한다.

 

Computed Value (연산된 값)

- 기존의 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값으로 성능 최적화를 위해 사용된다. 어떤 값을 연산할 때, 연산에 기반되는 값이 바뀔 때만 새로 연산하고, 바뀌지 않았다면 기존의 값을 사용한다.

 

Reactions (반응)

- 값이 바귐에 따라 해야 할 일을 정한다. 즉, observable state의 내부 값이 바뀌면 따로 설정해둔 할 일을 실행한다.

 

Actions (행동)

- 상태에 어떻게 변화를 일으킬 것인지 정의하는 부분. (redux의 action과 같은 개념)

 

MobX 특징

•  상태 관리 라이브러리이다.
  • 리액트에 종속되어 있는 라이브러리가 아니다! 
• 옵저버 패턴을 사용한다.
• MobX에서는 오직 상태(데이터)만 관찰 가능하며, 상태가 변경되었을 때 반응한다. 

 

MobX 기본 사용 함수

import {decorate, observable, action, computed} from 'mobx';
import {observer} from 'mobx-react';

 

사용 예시) 

useState를 사용했던 부분을 수정했다. 

const function = () => {
    const mallNum = new ObservableData<number>(0);
    function.method(params).then((num) => mallNum.data = num);
    
    return (
    	// 생략
        <div>(<TextDisplayer get={() => String(mallNum.data)} />몰)</div>
    )
};

• observableData를 사용하면 상태가 변경될 때 자동으로 관련된 컴포넌트들이 업데이트된다.
• MobX를 사용하면 상태 변경과 관련된 모든 컴포넌트를 자동으로 업데이트 하므로 컴포넌트 간의 의존성을 명시적으로 정의할 필요가 없다. 
  
  • 자동으로 의존성을 추적하고, 상태 변경 시 관련된 모든 컴포넌트를 업데이트하므로 효율적인 상태 관리가 가능하다.

 

 

 

배울것도 많고 공부할 건 더 많고 .. 화이팅 ..!