[javascript] 리액트 라우터의 기본 예제 및 코드 샘플
리액트 라우터(React Router)는 리액트 애플리케이션에서 클라이언트 사이드 라우팅을 구현하는 데 사용되는 라이브러리입니다. 이를 통해 싱글 페이지 애플리케이션(SPA)을 개발하고 다양한 경로에 대한 컴포넌트를 렌더링할 수 있습니다.
이번에는 리액트 라우터를 사용한 기본 예제와 코드 샘플을 살펴보겠습니다.
설치
리액트 라우터를 사용하기 위해선 먼저 프로젝트에 패키지를 추가해야 합니다. 다음 명령어를 사용하여 리액트 라우터를 설치합니다.
npm install react-router-dom
예제 설명
우리는 간단한 블로그 애플리케이션을 구축할 것입니다. 이 애플리케이션은 메인 페이지와 포스트 페이지로 구성됩니다. 메인 페이지에는 최근 게시물 목록이 표시되고, 포스트 페이지에는 특정 포스트의 내용이 표시됩니다.
코드 샘플
다음은 간단한 예제의 코드 샘플입니다.
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
const BlogPost = ({ match }) => {
const postId = match.params.id;
return (
<div>
<h2>{`Post ${postId}`}</h2>
<p>Post content...</p>
</div>
);
};
const Blog = () => {
return (
<div>
<h2>Recent Posts</h2>
<ul>
<li><Link to="/post/1">Post 1</Link></li>
<li><Link to="/post/2">Post 2</Link></li>
<li><Link to="/post/3">Post 3</Link></li>
</ul>
</div>
);
};
const App = () => {
return (
<Router>
<div>
<Switch>
<Route exact path="/" component={Blog} />
<Route path="/post/:id" component={BlogPost} />
</Switch>
</div>
</Router>
);
};
export default App;
위 코드는 Blog 컴포넌트에서 최근 게시물 목록을 표시하고, 각 게시물을 클릭하면 해당 포스트의 내용이 표시되는 애플리케이션을 구현한 것입니다. BrowserRouter, Switch, Route, Link 컴포넌트를 사용하여 클라이언트 사이드 라우팅을 설정하고, match 객체를 통해 포스트 ID를 가져와서 표시해줍니다.
이제 위의 예제 코드를 참고하여 리액트 라우터를 사용하여 클라이언트 사이드 라우팅을 구현해보세요!