1. 프로젝트 준비 및 기본적인 사용법
우선 리액트 라우터를 사용할 프로젝트를 준비해주겠습니다.
$ npx create-react-app router-tutorial
그 다음엔 해당 프로젝트 디렉토리로 이동하여 라우터 관련 라이브러리를 설치하겠습니다.
$ cd router-tutorial
$ yarn add react-router-dom
프로젝트에 라우터 적용
라우터 적용은 index.js 에서 BrowserRouter
라는 컴포넌트를 사용하여 구현하시면 됩니다.
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; // * BrowserRouter 불러오기
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// * App 을 BrowserRouter 로 감싸기
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.unregister();
페이지 만들기
이제 라우트로 사용 할 페이지 컴포넌트를 만들 차례입니다. 웹사이트에 가장 처음 들어왔을 때 보여줄 Home 컴포넌트와, 웹사이트의 소개를 보여주는 About 페이지를 만들어보겠습니다.
src/Home.js
import React from 'react';
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>이곳은 홈이에요. 가장 먼저 보여지는 페이지죠.</p>
</div>
);
};
export default Home;
src/About.js
import React from 'react';
const About = () => {
return (
<div>
<h1>소개</h1>
<p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트랍니다.</p>
</div>
);
};
export default About;
이제 페이지로 사용 할 모든 컴포넌트가 완료되었습니다.
Route: 특정 주소에 컴포넌트 연결하기
사용자가 요청하는 주소에 따라 다른 컴포넌트를 보여줘보겠습니다. 이 작업을 할 때에는 Route
라는 컴포넌트를 사용합니다.
사용 방식은 다음과 같습니다:
<Route path="주소규칙" component={보여주고싶은 컴포넌트}>
한번 App.js 에서 기존 코드들을 날리고, Route 들을 렌더링해주겠습니다.
src/App.js
import React from 'react';
import { Route } from 'react-router-dom';
import About from './About';
import Home from './Home';
const App = () => {
return (
<div>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</div>
);
};
export default App;
여기까지 하고 한번 yarn start
를 하여 개발서버를 시작해보세요.
이렇게 /
경로로 들어가면 홈 컴포넌트가 뜨고,
/about
경로로 들어가면, 예상과 다르게 두 컴포넌트가 모두 보여집니다!
이는 /about
경로가 /
규칙과도 일치하기 때문에 발생한 현상인데요, 이를 고치기 위해선 Home 을 위한 라우트에 exact 라는 props 를 true 로 설정하시면 됩니다.
src/App.js
import React from 'react';
import { Route } from 'react-router-dom';
import About from './About';
import Home from './Home';
const App = () => {
return (
<div>
<Route path="/" exact={true} component={Home} />
<Route path="/about" component={About} />
</div>
);
};
export default App;
이렇게 하면 경로가 완벽히 똑같을때만 컴포넌트를 보여주게 되어 이슈가 해결됩니다.
Link: 누르면 다른 주소로 이동시키기
Link 컴포넌트는 클릭하면 다른 주소로 이동시키는 컴포넌트입니다. 리액트 라우터를 사용할땐 일반 <a href="...">...</a>
태그를 사용하시면 안됩니다. 만약에 하신다면 onClick 에 e.preventDefault()
를 호출하고 따로 자바스크립트로 주소를 변환시켜주어야 합니다.
그 대신에 Link 라는 컴포넌트를 사용해야하는데요, 그 이유는 a 태그의 기본적인 속성은 페이지를 이동시키면서, 페이지를 아예 새로 불러오게됩니다. 그렇게 되면서 우리 리액트 앱이 지니고있는 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게됩니다. 그렇기 때문에 a 태그 대신에 Link 컴포넌트를 사용하는데요, 이 컴포넌트는 HTML5 History API 를 사용하여 브라우저의 주소만 바꿀뿐 페이지를 새로 불러오지는 않습니다.
그럼 어디 한번 사용해볼까요?
src/App.js
import React from 'react';
import { Route, Link } from 'react-router-dom';
import About from './About';
import Home from './Home';
const App = () => {
return (
<div>
<ul>
<li>
<Link to="/">홈</Link>
</li>
<li>
<Link to="/about">소개</Link>
</li>
</ul>
<hr />
<Route path="/" exact={true} component={Home} />
<Route path="/about" component={About} />
</div>
);
};
export default App;