React-Router

React-Router

SPA 화면처럼 화면에 깜빡임이 일어나지 않으면서, 다른 URL 을 가질 수 있도록 하는 것이 react-router 의 기능입니다.

라우터를 설치해 봅시다.

npm install --save react-router-dom 
or
yarn add react-router-dom

Example

참고

• <BrowserRouter /> 로 감싸줘야 이제 라우터를 사용할 수 있습니다.
• <Link /> 를 사용하여 다른 주소로 컴포넌트를 뿌릴 수 있도록 도와주는 컴포넌트입니다.
• <Router /> 를 사용하여 특정 주소로 컴포넌트를 연동하여 사용할 수 있습니다.
• <Router /> 에서 exact 를 사용하여 해당 path 에서 라우팅이 이뤄지기 때문이다. 사용하지 않으면, 주소를 이동할 때마다 컴포넌트가 계속 붙어서 나오게 됨... (주의)

메뉴바를 이용하여 각 페이지당 컴포넌트를 뿌리는 예제를 만들어보겠습니다.

우선 src 밑에 router 라는 폴더를 만든 뒤 밑에 코드를 작성해봅니다.

Router.js (src/router/Router.js)

import React, { useState } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Sample1 from '../sample/sample1'
import Sample2 from '../sample/sample2'
import Sample3 from '../sample/sample3'
import './Router.css';

const Router = () => {
  return (
    <BrowserRouter>
      <div className='menu'>
        <ul>
          <li>
            <Link to='/'>
              Sample1
            </Link>
          </li>
          <li>
            <Link to='/sample2'>
              Sample2
            </Link>
          </li>
          <li>
            <Link to='/sample3'>
              Sample3
            </Link>
          </li>
        </ul>
      </div>
      <div>
        <Route path="/" exact={ true } component={ Sample1 } />
        <Route path="/sample2" component={ Sample2 } />
        <Route path="/sample3" component={ Sample3 } />
      </div>
    </BrowserRouter>
  );
}

export default Router;

Router.css (src/router/Router.css)

ul li {                       
  list-style: none;          
  color: white;           
  background-color: #6e6d6d;
  float: left;    
  line-height: 30px;
  text-align: center;
}
a {
  text-decoration:none;
  color: white;
  display: block;
  width: 300px;
  font-size: 12px;
  font-weight: bold;
}

li a:hover:not(.active) {
  background-color: #111;
}

.menu {
  display: flex;
  justify-content: center;
}

완료되었으면, src 밑에 sample 이라는 폴더를 하나 더 만들어봅니다.
여기서 이제 각 페이지당 뿌릴 컴포넌트를 제작할 것입니다.

sample1.js (src/sample/sample1.js)

import React from 'react';

const Sample1 = () => {
  return (
    <div>
      <h1>Sample1</h1>
      <p>첫번째 샘플 페이지입니다.</p>
    </div>
  );
};

export default Sample1;

sample2.js (src/sample/sample2.js)

import React from 'react';

const Sample2 = () => {
  return (
    <div>
      <h1>Sample2</h1>
      <p>두번째 샘플 페이지입니다.</p>
    </div>
  );
};

export default Sample2;

sample3.js (src/sample/sample3.js)

import React from 'react';

const Sample3 = () => {
  return (
    <div>
      <h1>Sample3</h1>
      <p>세번째 샘플 페이지입니다.</p>
    </div>
  );
};

export default Sample3;

완성되었으면 실행해서 결과를 확인해봅니다.

결과

첫 메인 화면은 정의해둔 Sample1 페이지가 나오는 것을 확인할 수 있다.

이제 메뉴바를 눌러보자. Url이 변경되면서 컴포넌트를 뿌려주는 것을 확인할 수 있다.

파라미터

rest api 를 많이 쓰기 때문에 쿼리스트링 대신 파라미터에 대한 설명을 하도록 하겠습니다.
라우터에서 파라미터를 사용하여 값을 전달해야 하는 경우가 있습니다.
파라미터를 사용하게 되면 이제 url 의 구조가 /aaaa/bbbb 이런 식으로 사용하게 됩니다.
위의 예제에 이어서 간단한 예제를 하나 만들어봅시다.

paramSample.js (src/sample/paramSample.js)

import React from 'react';

const ParamSample = ({ ...props }) => {
  const params = props.match.params;
  return (
    <div>
      <h1>paramSample</h1>
      <h2>받은 파라미터: { params.param }</h2>
    </div>
  );
};

export default ParamSample;

Router.js (src/router/Router.js)

import React, { useState } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Sample1 from '../sample/sample1'
import Sample2 from '../sample/sample2'
import Sample3 from '../sample/sample3'
import ParamSample from '../sample/paramSample'
import './Router.css';

const Router = () => {
  return (
    <BrowserRouter>
      <div className='menu'>
        <ul>
          <li>
            <Link to='/'>
              Sample1
            </Link>
          </li>
          <li>
            <Link to='/sample2'>
              Sample2
            </Link>
          </li>
          <li>
            <Link to='/sample3'>
              Sample3
            </Link>
          </li>
          <li>
            <Link to='/paramSample/hi'>
              param: hi
            </Link>
          </li>
          <li>
            <Link to='/paramSample/bye'>
              param: bye
            </Link>
          </li>
        </ul>
      </div>
      <div>
        <Route path="/" exact={ true } component={ Sample1 } />
        <Route path="/sample2" component={ Sample2 } />
        <Route path="/sample3" component={ Sample3 } />
        <Route path="/paramSample/:param" component={ ParamSample } />
      </div>
    </BrowserRouter>
  );
}

export default Router;

결과

만들어진 예제에서 메뉴 hi, bye 를 누르면 hi, bye 파라미터가 넘어가는 것을 볼 수 있습니다.
url을 직접 변경하면, 파라미터가 넘어가는 것을 확인할 수 있을 것입니다.

참고

1. history 객체를 사용하여, 직접 라우터에 접근할 수 있다.
2. 라우터를 응용해서 라우터 내부의 라우터를 추가하여 서브 라우터를 쓸 수가 있다.

경험

React 환경에서 어떤 UI 관련된 데모 사이트를 만들어야 했는데, 현재 페이지가 어떤 샘플인지, 내용인지에 대해
알려 주기 위해 파라미터를 전달하도록 라우터를 구현함.