[ReactJS] React Router 사용하기

개요

React JS로 웹페이지를 개발하다 보면, 보통 One Page 방식으로 많이 개발하게 됩니다.

처음에는 크게 문제가 되지 않는데, 점점 페이지의 규모가 커지다 보면 상위 페이지에서 하위 컴포넌트로 계속적으로 데이터를 넘겨주거나 Context를 이용하여 전역 데이터를 전달해야 합니다. 하지만 React에서도 Context는 사용하지 말라고 가이드가 되어있습니다.

그래서 몇가지 찾아보던 중 웹 주소창을 활용한 라우팅 방법이 있어서 소개하고자 합니다.

React Router 사용하기

React JS 환경이 구성되어있는 상태에서 다음 명령을 통하여 관련 라이브러리를 설치/사용할 수 있습니다.

$ npm install --save react-router-dom

예제

설치가 완료되면 다음 예제를 통해서 어떻게 사용하는지 알아보겠습니다.

import React from 'react'
import {
  BrowserRouter as Router, // 기본적인 웹에서는 BrowserRouter를 사용
  Route,
  Link
} from 'react-router-dom'

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/> // exact는 주소가 정확히 일치하는 경우에 처리하도록 함
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/> // :를 사용하여 파라미터로 전달할 수 있음
    <Route exact path={match.url} render={() => ( // component말고 render 함수 사용도 가능함
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3> // 주소에 파라미터방식이 지정되면 match.params에 정의됨
  </div>
)

export default BasicExample

예제설명

React Router는 3가지로 구성이 됩니다.

• Router : 라우팅을 처리(또는 관리) 하는 최상위 컴포넌트 입니다.
• BrowserRouter : HTML5의 history API를 활용해서 처리하는 방식입니다
• HashRouter : 요청되는 URL의 해시값을 가지고 처리하는 방식입니다.
• MemoryRouter : 요청되는 URL을 모두 memory에 보관하여 처리하는 방식입니다.
• StaticRouter : 주소 내용을 변경하지 않는 방식입니다.
• Route : 라우트에 대상이 되는 컴포넌트입니다. 특정 주소를 지정하고 해당 주소가 요청이 되면 지정된 컴포넌트 또는 render 함수를 호출하게 됩니다.
• Link : 어플리케이션에서 주소를 요청할 수 있게 합니다.

라우팅으로 처리하는 어플리케이션을 구성하기 때문에 최상위에 <Router> 컴포넌트로 구성을 해야 합니다. 4가지 중 선택에 따라 사용할 수 있으나, 일반적인 웹 페이지를 개발하므로 BrowserRouter를 사용하시면 됩니다. 그런 다음 Link와 Route의 조합으로 응용프로그램을 구성하시면 됩니다.

Link에는 to라는 속성으로 이동 경로를 지정할 수 있습니다.

Route에서는 path라는 속성으로 처리 대상이 되는 주소를 지정할 수 있고 component(또는 render) 속성으로 해당 주소가 요청되면 화면에 표출할 컴포넌트를 지정할 수 있습니다.

요청 주소는 파라미터화 할 수 있으며, ":"를 사용하시면 됩니다.(예제에는 :topicId) 그러면 match.params 하위에 전달이 됩니다.