[react] react-router-dom 설치, 라우팅하기

react-router-dom

 

react-router-dom 설치하는

방법을 알아보겠습니다.

 

routing

・ 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 합니다.
・ 리액트 자체에 이 기능이 내장되어 있지 않기 때문에 라이브러리를 사용하여 이 작업을 진행합니다.
・ 리액트 라우팅 라이브러리는  react-router, reach-router, Next.js 등이 있고, 가장 많이 사용하는 것은  react-router입니다.

 

react-router-dom

・ react의 내비게이션 라이브러리입니다. 
・ React Router를 사용하면 앱에서 발생하는 라우팅이 location나 history와 같은 브라우저 내장 API와 완벽하게 연동이 됩니다.

 

react-router-dom 설치

React Router는 웹과 앱용이 있습니다. 아래와 같이 Web용 react-router-dom을 설치해줍니다.

・ react-router: 웹&앱
・ react-router-dom: 웹
・ react-router-native: 앱

npm i react-router-dom
//또는
yarn add react-router-dom

 

프로젝트에 router 적용 순서

BrowerserRouter 연결

프로젝트에 react router를 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter 컴포넌트를 사용하여 감싸줍니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

 

페이지 컴포넌트 만들기

페이지에 사용할 하위 컴포넌트를 만듭니다. (예, Home.js / About.js / Main.js)

 

Route path 연결

· App.js에서 Router 컴포넌트를 사용하여 특정 주소에 컴포넌트를 연결해줍니다.
· /about, /main 경로에 Home 컴포넌트가 안나오기 위하여 exact={true} 속성을 삽입합니다.

import React from "react";
import {Router} from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Main from './components/Main';


const App = () => {
  return (
    <div>
      <Route path="/" component={Home} exact={true} />
      <Route path="/about" component={About} />
      <Route path="/main" component={Main} />
    </div>
  );
}

export default App;

 

Link 컴포넌트 연결

Link 컴포넌트는 클릭하면 다른 주소로 이동시켜 줍니다. 

import {Link} from 'react-router-dom';
...
<Link to="/about">About</Link>

 

react router 핵심 컴포넌트

BrowserRouter 

· 이 컴포넌트는 웹에 html5 history API를 사용하여 페이지를 새로고침 하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를  props로 쉽게 조회하거나 사용할 수 있도록 합니다.

· 아래의 <Route>와 <Link> 컴포넌트가 함께 유기적으로 동작하도록 묶어주는 데 사용합니다.
· <Route>와 <Link> 컴포넌트는 DOM 트리 상에서 항상 <Router>를 공통 상위 컴포넌트로 가져야 합니다.

<BrowserRouter>            
 <div>
   <Link to="/">Home</Link><br/>    
   <Link to="/about">About</Link><br/>
   <Link to="/memo">Menu</Link><br/>
  <Switch>              
   <Route exact path="/" component={Home}/>
   <Route path="/about" component={About}/>
   <Route path="/menu" component={Menu}/>
  </Switch>
 </div>
</BrowserRouter>

 

link

· html의 <a> 태그와 유사한 기능을 합니다. to 속성에 설정된 링크로 이동합니다.

· react router에서는 <a> 태그를 사용하면 안 됩니다. 이 태그는 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려 버리게 됩니다. 

· Link를 사용하여 페이지를 전환하면, 페이지를 새로 불러오지 않고, 애플리케이션은 그대로 유지한 상태에서 html5, history API를 사용하여 페이지의 주소만 변경해 줍니다.

<Link to="/about">About</Link>

 

Route

컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링 합니다.

<Route path="/about" component={About} />

 

switch

· 자식 컴포넌트 route 또는 redirect 중 매치되는 첫 번째 요소를 렌더링 합니다.
· Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭 되는 요소만 렌더링 합니다.
· Switch로 감싸고 있기 때문에 Route가 중복되는 것이 있으면 첫 번 째 요소만 렌더링 합니다.
· 사용하지 않을 경우 매칭 되는 모두를 렌더링 합니다.

 

router import

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