5. React Router

Wa! 어김없이 돌아온 심효근입니다!

오늘은 주소 마다 페이지를 다르게 렌더링하는 React Router 를 배워볼겁니다.

사용할 모듈은 "React Router Dom" 입니다.

npm install react-router-dom

혹은

yarn add react-router-dom

로 사용할 수 있습니다.

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const App = () => {
	return (
		<div>
			<BrowserRouter>
				<Route path='/' component={Home} />
				<Route path='/about' component={About} />
			</BrowserRouter>
		</div>
	);
};

const Home = () => {
	return <h1>홈</h1>;
};

const About = () => {
	return <h1>어바웃</h1>;
};

export default App;

간단하게 Home, About 컴포넌트를 라우팅 했습니다.

<Route path='/' component={Home} />
<Route path='/about' component={About} />

'/' 에 해당하는 주소에, Home 컴포넌트를 매칭했습니다.

'/about' 에 해당하는 주소에는 About 컴포넌트를 매칭했습니다.

그런데 홈 컴포넌트가 중복되는 모습을 볼 수 있습니다.

<Route exact path='/' component={Home} />

exact 를 사용하면 정확하게 path가 일치할때만 컴포넌트를 매칭합니다.

다른 방법으로는 Switch 가 있습니다.

<Switch>
	<Route path='/about' component={About} />
	<Route path='/' component={Home} />
</Switch>

Route를 이 컴포넌트에 넣으면, 첫 번째로 매칭되는 Route만 보여줍니다.

Link

a태그 처럼 페이지를 이동할 수 있게 해줍니다. 하지만 새로고침은 하지 않습니다.

const Home = () => {
	return (
		<>
			<h1>홈</h1>
			<Link to='/about'>Go About</Link>
		</>
	);
};

 

새로고침 없이 이동할 수 있습니다.

이상 React Router Dom에 대한 글을 마치겠습니다.