리액트 라우터 설치와 사용
1) 설치
먼저 React 프로젝트를 시작하기 위해서는 개발환경을 구축해야한다.
터미널을 열어 디렉토리를 만들고 그 디렉토리에 프로젝트를 생성해보자.
npx create-react-app (diretory's name)
cd (directory's name)
npm start
스타트를 통해서 프로젝트가 잘 생성되었는지 확인한다.
생성이 잘 되었다면 React-Router-Dom을 설치한다.
npm install react-route-dom
설치가 잘 되었는지는 package.json에 들어가서 dependencies에 react-route-dom이라는 라이브러리가 등록된 것을 확인하면 된다.
이제 app.js파일로 이동하여 최상단에 react-route 라이브러리가 제공하는 컴포넌트들을 사용하기 위해 세팅을 한다.
import React from 'react'
import {BrowserRouter, Route, Switch, Link} from 'react-route-dom';
이제 Route를 통해서 보여줄 컴포넌트 페이지들을 import하거나 생성한다.
컴포넌트들을 만들거나 추가했다면, 라우트를 통해서 주소에 따라 다른 화면이 보이게 해보자. 주소와 화면은 다르지만 우리가 바꾸는것은 그 주소에 해당하는 바뀐 컴포넌트들만 갈아주는것이다. 지금은 우선 페이지가 다 갈아엎어지는것이 아니라는것만 알고있자.
- "/" 홈 페이지 주소로 주로 써보자
- "/news" 이런식으로 목적에 맞는 주소를 만들어보자
- "/columns"
그리고 App.js에 라우팅을 위한 React Router DOM 주요 컴포넌트를 세팅한다.
BrowserRouter
BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해줍니다.
아래와 같이 ReactDOM의 렌더 단계인 index.js 에 넣어서 활용할 수도 있습니다. BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있습니다.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRouter></BrowserRouter>, document.querySelector('#root'));
Switch, Route
경로를 매칭해주는 역할을 하는 컴포넌트입니다.
-
<Switch> 컴포넌트는 여러 <Route> 를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. Switch<> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.
-
<Route> 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.
Link
경로를 연결해주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경해 줍니다.
ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 태그로 바뀌는 모습을 볼 수 있습니다.
React Router 에서 <a> 태그가 아닌 <Link>를 사용하는 이유
<a>태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킵니다. 즉, 새로고침 현상이 일어나게 되죠.
하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장 되어있기 때문에 SPA를 구현할 수 있습니다.
<BrowserRouter>로 App 컴포넌트의 JSX를 감싼다. 그리고 <Switch>와<Router>로 주소경로와 만들어둔 컴포넌트들을 연결해준다.
- Route의 path 속성을 이용하여 경로를 작성한다.
- <Route><News /></Route>이런식으로 라우트 컴포넌트안에 연결하고싶은 컴포넌트를 넣어준다.
<BrowserRouter> : 최상위 컴포넌트를 감싸준다.
<Switch> : /일때, /하위 경로일때 모두 화면에 출력되지 않도록 한다.
<Route exact path='/'....> : exact는 이하 경로를 중복 출력하지 않도록한다.exact 속성
<Switch> 를 사용하여 exact 역할을 대신 해주는 경우이다. 하지만 <Switch>는 순서와 위치가 중요하다. 위에서 아래로 경로를 하나씩 검사하면서 해당 경로에 해당하는 라우트를 실행시키기 때문에. 이런 경우, 비교할 라우트를 더 상단에 작성한다. 하지만 만약 위의 예제처럼 Home을 위에 둔 상태에서 exact없이 활용한다면? 중복되는 경로로 인해 다른 라우트로의 이동이 불가능할 것이다. 이를 해결하는 방법으로 exact를 사용할 수 있다.
- <Link> 의 to 속성을 활용하여 Route 컴포넌트에 설정해준 path 주소를 연결해준다.
function App() {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
</li>
<li>
<Link to="/news">News</Link>
</li>
<li>
<Link to="/columns">Columns</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/news">
<News />
</Route>
<Route path="/columns">
<Columns />
</Route>
</Switch>
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function News() {
return <h1>News</h1>;
}
function Columns() {
return <h1>Columns</h1>;
}
export default App; 