react-router란?
가장 많이 사용되는 라이브러리 중 하나로, 클라이언트 사이드에서 이루어지는 라우팅을 간단하게 해주며 서버 사이드 렌더링을 도와주는 도구들을 제공합니다. react-router은 웹과 앱, react-router-native은 앱에 사용 가능합니다. 오늘 다루는 react-router-dom은 웹에서 사용합니다.
보다 자세한 사용법은 이 문서에서 확인할 수 있습니다.
react-router-dom 사용하기
터미널에 npm install react-router-dom 명령어를 입력하여 설치가 완료되면 react-router-dom으로부터 BrowserRouter, Route, Switch를 import 합니다.
import {BrowserRouter, Route, Switch} from 'react-router-dom';BrowserRouter: URL과 UI를 동기화하는 라우터입니다.Route: 컴포넌트 속성에 설정된 url과 현재 경로가 일치하면 해당하는 컴포넌트나 함수를 렌더링합니다.Switch: 자식 컴포넌트 route 또는 Redirect 중 매치되는 첫 번째 요소를 렌더링합니다. BrowserRouter만 사용할 때와의 차이점은 하나의 매칭되는 요소만 렌더링한다는 것입니다. 사용하지 않을 경우엔 매칭되는 모든 요소를 렌더링합니다.
라우트 설정
Route 컴포넌트를 사용하여 path 값으로 경로를 설정합니다.
//App.js
import React from 'react';
import ShowPage from './a';
import Hello from './hello';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/">
<Hello/>
</Route>
<Route path="/a">
<ShowPage/>
</Route>
</Switch>
</BrowserRouter>
);
}
export default App;첫 번째 라우트 / 는 Hello 라는 컴포넌트를, 두번째 /a 는 ShowPage 컴포넌트를 보여주게 합니다.
첫 번째 라우트에는 exact가 붙어있는데, 주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여줘야 할 때 사용합니다. /a에도 / 문자열이 들어가기때문에, 이렇게 중첩될 수도 있는 라우트는 exact로 설정해야합니다.
Link 컴포넌트를 사용하여 라우터 이동
react-router-dom에서 import 한 Link를 사용하여 두 파일 간 이동할 수 있는 링크를 추가합니다. 'a' 태그와 비슷한 Link 는, to 속성에 설정된 링크로 이동합니다. <a href>의 형식을 사용하면 페이지가 새로고침되기때문에 Link를 사용합니다. 이 컴포넌트를 사용하면 페이지를 새로 불러오는걸 막고, 원하는 라우트로 화면 전환을 해줍니다. 이 컴포넌트에 전달되는 props들은 컴포넌트 내부의 DOM에도 전달되므로, 일반 DOM 엘리먼트에 설정하듯이 className, style, onClick등의 이벤트를 전달할 수 있습니다.
//Hello.js
import React from 'react';
import { Link } from 'react-router-dom';
export default function Hello() {
return (
<div>
<p>This is Comp 1 page</p>
<Link to="/a">link to /a</Link>
</div>
)
}//a.js
import React from 'react';
import { Link } from 'react-router-dom';
export default function ShowPage() {
return (
<div>
<p>This is Comp 2 Page</p>
<Link to="/">link to /</Link>
</div>
)
}
Comp 1 페이지의 link to /a를 클릭하면 Comp 2 페이지로 라우트를 변경하고, 반대로 Com 2 페이지의 link to / 를 클릭하면 Comp 1 페이지로 라우트를 변경합니다.
