리액트 애플리케이션을 개발하다 보면 페이지 간의 이동을 위해 라우팅 기능을 사용해야 할 때가 있습니다. 리액트 라우터는 이러한 기능을 제공하는 라이브러리 중 하나로, 간편하게 라우팅 처리를 할 수 있습니다. 이번에는 리액트 라우터를 사용하여 메뉴와 상단바를 처리하는 방법에 대해 알아보겠습니다.
1. 리액트 라우터 설치 및 설정
먼저, 프로젝트에 리액트 라우터를 설치해야 합니다. 다음의 명령어를 사용하여 설치할 수 있습니다:
npm install react-router-dom
설치가 완료되면, index.js 파일에서 라우터를 설정해야 합니다. 다음과 같이 코드를 작성해보겠습니다:
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Menu from './Menu';
import TopBar from './TopBar';
ReactDOM.render(
<Router>
<div>
<TopBar />
<nav>
<ul>
<li>
<Link to="/">홈</Link>
</li>
<li>
<Link to="/menu">메뉴</Link>
</li>
</ul>
</nav>
<Route exact path="/" component={App} />
<Route path="/menu" component={Menu} />
</div>
</Router>,
document.getElementById('root')
);
위의 코드에서는 BrowserRouter, Route 및 Link 컴포넌트를 사용하여 라우팅을 처리합니다. BrowserRouter는 history API를 사용하여 클라이언트 사이드 라우팅을 제공합니다. Route는 경로와 해당 컴포넌트를 매핑하는 역할을 합니다. Link는 페이지 간의 링크를 생성하는 역할을 합니다.
2. 메뉴 및 상단바 컴포넌트 작성
위의 코드에서 TopBar와 Menu는 라우팅에 사용될 컴포넌트입니다. 이들을 각각 작성해보겠습니다.
TopBar 컴포넌트:
import React from 'react';
const TopBar = () => {
return (
<header>
<h1>상단바</h1>
</header>
);
}
export default TopBar;
Menu 컴포넌트:
import React from 'react';
const Menu = () => {
return (
<div>
<h2>메뉴</h2>
<ul>
<li>메뉴 항목 1</li>
<li>메뉴 항목 2</li>
<li>메뉴 항목 3</li>
</ul>
</div>
);
}
export default Menu;
위의 코드에서 TopBar는 상단바를 렌더링하는 함수형 컴포넌트입니다. Menu는 “메뉴”라는 제목과 목록을 렌더링하는 컴포넌트입니다.
3. 페이지 간의 이동 확인
이제 애플리케이션을 실행하여 페이지 간의 이동이 잘 작동하는지 확인해보겠습니다. 브라우저에서 http://localhost:3000을 열어보면, 상단바와 홈 페이지가 표시됩니다. 메뉴로 이동하려면 “메뉴” 링크를 클릭하면 됩니다.
상단바와 메뉴 컴포넌트가 제대로 렌더링되는지 확인해보세요. 이제 리액트 라우터를 통해 라우팅 처리를 할 수 있게 되었습니다.
결론
리액트 라우터를 사용하여 페이지 간의 이동을 쉽게 처리할 수 있습니다. 상단바와 메뉴와 같은 컴포넌트를 라우터와 함께 사용하여 웹 애플리케이션을 보다 효율적으로 개발할 수 있습니다. 리액트 라우터에 대해 더 알고 싶다면 공식 문서를 참조해보세요.