리액트 라우터(React Router)는 싱글 페이지 애플리케이션(Single Page Application)에서 라우팅을 처리하기 위한 유용한 도구입니다. 리액트 라우터를 사용하면 URL의 경로에 따라 적절한 컴포넌트를 렌더링할 수 있습니다. 이러한 기능을 이용하여 라우팅 앱을 만들 수 있습니다.

일반적으로, 라우터와 관련된 로직은 앱의 라우팅을 처리하는 메인 컴포넌트에 직접 작성됩니다. 그러나 큰 규모의 애플리케이션에서는 라우팅 관련 로직을 분리해야 할 필요가 있습니다. 이를 위해, 분리된 라우팅 앱을 만들어 처리할 수 있습니다.

분리된 라우팅 앱 설치

분리된 라우팅 앱을 만들기 위해 리액트 라우터를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령을 실행하여 필요한 패키지를 설치합니다:

npm install react-router-dom

분리된 라우팅 앱 구성

먼저, 앱의 메인 컴포넌트에서 BrowserRouter를 사용하여 라우팅을 처리할 수 있도록 구성합니다. 이를 위해 다음과 같이 index.js 파일에서 BrowserRouter를 임포트하고 ReactDOM.render 메소드를 수정합니다:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

다음으로, 분리된 라우팅 앱을 만들기 위해 새로운 파일을 생성합니다. routes.js라는 파일을 만들고 다음과 같이 라우팅에 관련된 설정을 작성합니다:

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

const Routes = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
    </Switch>
  );
};

export default Routes;

위의 예시에서는 / 경로에는 Home 컴포넌트를, /about 경로에는 About 컴포넌트를, 그리고 그 외의 경로에는 NotFound 컴포넌트를 렌더링하도록 설정되었습니다.

마지막으로, 메인 컴포넌트인 App.js 파일에서 Routes 컴포넌트를 임포트하여 사용합니다:

import React from 'react';
import Routes from './routes';

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Routes />
    </div>
  );
};

export default App;

분리된 라우팅 앱 사용하기

이제 Routes 컴포넌트 내에서 정의한 경로에 따라 해당 컴포넌트가 렌더링될 것입니다. Home 컴포넌트와 About 컴포넌트가 각각 / 경로와 /about 경로에서 렌더링되며, 존재하지 않는 경로에 대한 요청은 NotFound 컴포넌트에서 처리됩니다.

이와 같이 분리된 라우팅 앱을 구성하면 라우팅 관련 로직을 각각의 컴포넌트에 분리하여 관리할 수 있습니다. 이로 인해 코드의 가독성과 유지보수성이 향상될 수 있습니다.

참고 문서:

• 리액트 라우터 공식 문서