MobX를 활용한 모바일 앱 네비게이션 처리 방법

17 Oct 2023

mobx

안녕하세요! 이번 글에서는 MobX를 활용하여 모바일 앱의 네비게이션 처리 방법에 대해 알아보겠습니다.

MobX란?

MobX는 상태 관리 라이브러리로, React와 같이 사용할 수 있으며, 애플리케이션의 상태를 관리하고 변경사항을 감지하여 자동으로 UI를 업데이트할 수 있습니다. MobX는 상태의 변화가 일어나면 해당 변화에 연결된 모든 컴포넌트들에게 자동으로 알림을 보내어 UI를 갱신합니다.

네비게이션 처리 방법

MobX Store 생성

먼저, MobX Store를 생성하여 앱의 상태를 관리합니다. 이 Store는 보통 네비게이션 스택과 현재 화면 등을 저장하고 제어하는 역할을 합니다.

import { observable, action } from 'mobx';

class NavigationStore {
  @observable stack = [];

  @action
  pushScreen(screen) {
    this.stack.push(screen);
  }

  @action
  popScreen() {
    this.stack.pop();
  }

  @computed
  get currentScreen() {
    return this.stack[this.stack.length - 1];
  }
}

const navigationStore = new NavigationStore();
export default navigationStore;

네비게이션 이벤트 핸들링

앱의 네비게이션 이벤트에 대해 적절한 MobX 액션을 호출하여 상태를 변경합니다. 예를 들어, 화면을 push 하는 경우 다음과 같이 핸들링할 수 있습니다.

import navigationStore from './stores/navigationStore';

// 화면 push
navigationStore.pushScreen('ScreenA');

화면 컴포넌트와 MobX Store 연결

네비게이션과 관련된 컴포넌트에서 MobX Store를 사용하여 상태를 업데이트하고 화면을 렌더링할 수 있습니다. 예를 들어, 현재 화면을 표시하는 Screen 컴포넌트를 만들고 MobX Store와 연결합니다.

import { observer } from 'mobx-react';
import navigationStore from './stores/navigationStore';

@observer
class Screen extends React.Component {
  render() {
    const { currentScreen } = navigationStore;

    return (
      <View>
        <Text>Current Screen: {currentScreen}</Text>
      </View>
    );
  }
}

export default Screen;

마무리

이렇게 MobX를 활용하여 모바일 앱의 네비게이션을 처리할 수 있습니다. MobX를 사용하면 앱 상태 관리가 간편해지고, UI와 상태가 자동으로 동기화되므로 개발 생산성이 향상됩니다. MobX에 대해 더 자세히 알고 싶다면 MobX 공식 문서를 참조해보세요.

#MobX #모바일 #네비게이션