MobX를 활용한 라우팅 및 내비게이션 구현 방법

17 Oct 2023

mobx

개요

라우팅 및 내비게이션은 웹 애플리케이션에서 중요한 기능입니다. MobX는 React와 함께 사용되면 라우팅 및 내비게이션을 쉽게 구현할 수 있습니다. 이번 블로그에서는 MobX를 활용하여 라우팅 및 내비게이션을 구현하는 방법을 알아보겠습니다.

MobX 설치하기

먼저 MobX를 사용하기 위해 프로젝트에 MobX를 설치해야합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 MobX를 설치할 수 있습니다.

npm install mobx mobx-react

라우터 클래스 생성하기

MobX를 사용하여 라우팅을 구현하기 위해 라우터 클래스를 생성해야합니다. 라우터 클래스는 현재 페이지의 상태와 해당 페이지로의 전환을 관리합니다. 다음은 간단한 라우터 클래스의 예입니다.

import { observable, action } from 'mobx';

class RouterStore {
  @observable currentPath = '/';

  @action
  navigateTo(path) {
    this.currentPath = path;
  }
}

const routerStore = new RouterStore();

export default routerStore;

이 예제에서는 MobX의 observable 데코레이터를 사용하여 currentPath라는 현재 페이지의 경로를 추적하고, action 데코레이터를 사용하여 navigateTo 메서드를 작성합니다. navigateTo 메서드는 주어진 경로로 페이지를 전환하고, currentPath 값을 업데이트합니다.

내비게이션 컴포넌트 만들기

이제 라우터 클래스를 사용하여 내비게이션 컴포넌트를 만들어 보겠습니다. 내비게이션 컴포넌트는 사용자가 클릭한 링크를 통해 페이지를 전환할 수 있도록 해주는 역할을 합니다. 다음은 내비게이션 컴포넌트의 예입니다.

import React from 'react';
import { observer } from 'mobx-react';

const Navigation = observer(({ routerStore }) => {
  const handleClick = (path) => {
    routerStore.navigateTo(path);
  };

  return (
    <nav>
      <ul>
        <li><a href="/" onClick={() => handleClick('/')}>Home</a></li>
        <li><a href="/about" onClick={() => handleClick('/about')}>About</a></li>
        <li><a href="/contact" onClick={() => handleClick('/contact')}>Contact</a></li>
      </ul>
    </nav>
  );
});

export default Navigation;

이 예제에서는 MobX의 observer 함수를 사용하여 Navigation 컴포넌트를 래핑합니다. 이를 통해 MobX에서 관찰 대상인 routerStore를 사용하여 상태 변화를 감지하고 컴포넌트를 다시 렌더링할 수 있습니다. 클릭 이벤트 핸들러에서는 routerStore의 navigateTo 메서드를 호출하여 페이지를 전환합니다.

페이지 컴포넌트 만들기

이제 라우터 클래스와 내비게이션 컴포넌트를 사용하여 페이지 컴포넌트를 만들어 보겠습니다. 페이지 컴포넌트는 현재 페이지의 경로에 따라 다른 내용을 표시하는 역할을 합니다. 다음은 페이지 컴포넌트의 예입니다.

import React from 'react';
import { observer } from 'mobx-react';

const Home = observer(({ routerStore }) => (
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
    <button onClick={() => routerStore.navigateTo('/about')}>Go to About</button>
  </div>
));

const About = observer(({ routerStore }) => (
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
    <button onClick={() => routerStore.navigateTo('/contact')}>Go to Contact</button>
  </div>
));

const Contact = observer(({ routerStore }) => (
  <div>
    <h1>Contact Page</h1>
    <p>Contact us here!</p>
    <button onClick={() => routerStore.navigateTo('/')}>Go to Home</button>
  </div>
));

export { Home, About, Contact };

이 예제에서는 Home, About, Contact라는 세 개의 페이지 컴포넌트를 만듭니다. 각 컴포넌트에서는 routerStore를 사용하여 페이지 전환을 처리하는 버튼을 제공합니다. 이때 MobX의 observer 함수를 사용하여 상태 변화를 감지하고 컴포넌트를 다시 렌더링합니다.

라우트 설정하기

마지막으로, 페이지 컴포넌트와 라우터 클래스를 연결하여 라우트를 설정해야합니다. 이를 위해 React의 라우팅 라이브러리 중 하나인 react-router-dom을 사용할 수 있습니다. 다음은 라우트를 설정하는 예입니다.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { observer } from 'mobx-react';

import Navigation from './Navigation';
import { Home, About, Contact } from './pages';
import routerStore from './stores/routerStore';

const App = observer(() => (
  <Router>
    <div>
      <Navigation routerStore={routerStore} />
      <Route exact path="/" component={() => <Home routerStore={routerStore} />} />
      <Route path="/about" component={() => <About routerStore={routerStore} />} />
      <Route path="/contact" component={() => <Contact routerStore={routerStore} />} />
    </div>
  </Router>
));

export default App;

이 예제에서는 react-router-dom 패키지에서 제공하는 BrowserRouter를 사용하여 라우터를 설정합니다. 각 경로에 해당하는 페이지 컴포넌트를 지정하고, routerStore를 컴포넌트에 전달합니다. 이렇게 함으로써 MobX를 사용하여 라우팅 및 내비게이션을 구현할 수 있습니다.

결론

이번 블로그에서는 MobX를 활용하여 라우팅 및 내비게이션을 구현하는 방법을 알아보았습니다. MobX를 사용하면 React 기반의 웹 애플리케이션에서 간단하고 효율적인 라우팅 및 내비게이션을 구현할 수 있습니다. MobX를 활용하여 애플리케이션의 UX를 향상시키는 데 도움이 되길 바랍니다.

참고: MobX 공식 문서