카운트앱 만들기(1) - mobx 6버전으로 만들기

npx create-react-app ./
npm install mobx

위 두 명령어를 사용해서 react과 mobx를 설치합니다.

 

makeObservable

속성(property), 모든 객체, 배열, map과 set은 observable로 설정될 수 있습니다.

객체를 observable로 만드는 가장 기본적인 방법은 makeObservable를 사용하여 속성마다 주석을 지정하는 것입니다.

counterStore.js 파일을 생성후 코드를 위와 같이 작성합니다.

 

observable : state를 저장하는 추적 가능한 필드를 정의합니다.

action : state를 수정하는 메소드를 표시합니다.

computed : state로부터 새로운 사실을 도출하고 그 결과값을 캐시하는 getter를 나타냅니다.

 

UI 구축

index.js파일의 수정 코드입니다.

function App({myCounter}) {

  return (
    <div style={{textAlign: 'center', padding: 16}}>
      카운트: {myCounter.count}
      <br />
      <br />
      마이너스?: {myCounter.isNegative}
      <br />
      <br />
      <button onClick={() => myCounter.increase()}>+</button>
      <button onClick={() => myCounter.decrease()}>-</button>
    </div>
  );
}

export default App;

App.js의 코드입니다.

여기서 버튼을 클릭해도 카운트의 숫자가 변동하지 않습니다. 이게 카운트 숫자를 구독하고 있지 않아서 그렇습니다.

 

observer 구독

observer Hoc는 렌더링 중에 사용되는 모든 observable에 react 구성 요소를 자동으로 구독합니다.

결과적으로 관련 observable항목이 변경되면 컴포넌트가 자동으로 다시 렌더링됩니다.

또한 관련 변경 사항이 없을 때 컴포넌트가 다시 렌더링되지 않도록 합니다.

따라서 컴포넌트에서 엑세스할 수 있지만 실제로 읽지 않는 observable는 다시 렌더링 되지 않습니다.

 

observer를 사용하기 위해 mobx-react 혹은 mobx-react-lite 모듈을 추가적으로 설치해야 합니다.

npm install mobx-react

위 명령어를 통해 mobx-react 모듈을 설치해서 observer를 사용합니다.

App.js의 변경 코드입니다.

 

React Context를 이용한 observable 공유하기

React Context는 전체 하위 트리와 observable을 공유하는 훌륭한 메커니즘입니다.

현재 상태에서 mobx의 observable값을 여러 컴포넌트에 주려면 아래와 같이 하면 됩니다.

React Context를 이용하면 Provider로 감싼 전체 하위 트리의 컴포넌트에 observable을 공유할 수 있습니다.

 

context 적용하기

import { createContext, useContext } from "react";

// Context 생성
export const CounterContext = createContext();

// Provider 생성
export const CounterProvider = CounterContext.Provider;

// Store에 있는 value를 사용하기 위한 Hooks
export const useCounterStore = () => useContext(CounterContext);

src폴더 안에 context폴더 생성 후, 안에 counterContext.js파일의 코드입니다.

index.js파일 중 CounterProvider로 App를 감싸주며 value에 store값도 부여해줍니다.

App.js파일로 store을 내려주지 않아서 별도로 적용해야 합니다.