[React] react-router-dom 적용하기

react-router-dom이란

React는 SPA(Single Page Application)입니다.
react-router-dom은 SPA에서 화면 전환을 위해 사용하는 모듈입니다.

간단하게 시작해보기

• 먼저 간단하게 프로젝트 구성을 하기 위해 create-react-app 으로 프로젝트를 생성해주세요.

npm create-react-app react-router-tutorial

• 해당 프로젝트 폴더로 이동하여 리액트 라우터를 설치해주세요.

cd react-router-tutorial
npm react-router-dom

리액트 파일 구성

• 아래와 같이 폴더 및 파일을 구성해주세요.

src/index.js

Entry point로 지정되어있는 파일입니다.

import React from 'react';
import ReactDom from 'react-dom';
import Router from './router';

ReactDom.render(<Router />, document.getElementById('root'));

src/router/index.js

라우팅을 위해 BrowserRouter태그로 감싸줍니다.

route 컴포넌트의 path속성은 경로로 접속 시 component속성의 컴포넌트를 보여주게 됩니다.
exact 속성은 path속성의 경로와 정확히 일치할 때만 컴포넌트를 보여줍니다.

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Menu from '../components/menu';
import Home from '../pages/home';
import Login from '../pages/login';

function index() {
  return (
    <BrowserRouter>
      <Menu />
      <Route exact path="/login" component={Login} />
      <Route path="/" component={Home} />
    </BrowserRouter>
  );
}

export default index;

src/components/menu/index.js

SPA 에서는 <a href="#">somewhere</a> 같은 형식을 사용하면 안됩니다.
왜냐하면 a tag는 페이지 이동 시 새로고침을 해버리기 때문에 여기서는 a tag를 사용하지않고 react-router에 있는 Link컴포넌트를 이용합니다.

import React from 'react';
import { Link } from 'react-router-dom';

function index() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/login">login</Link>
        </li>
      </ul>
      <hr />
    </div>
  );
}

export default index;

src/pages/home/index.js

화면 전환을 가시적으로 볼 수 있게 간단한 컴포넌트를 작성해줍니다.

import React from 'react';

function index() {
  return <div>home</div>;
}

export default index;

src/pages/home/index.js

import React from 'react';

function index() {
  return <div>login</div>;
}

export default index;

앱 실행

/ 경로로 이동 시

/login 경로로 이동 시

혹시 경로를 직접 입력해 이동 할 때 “Cannot GET /login” 같은 오류를 반환하게 된다면 webpack.config.js을 수정해주면 됩니다.

    devServer: {
        historyApiFallback: true
    },

이로써 간단하게 react-router-dom을 적용해보았습니다. 더 많은 내용과 심화적인 내용을 확인하고 싶으시면 공식 웹사이트를 확인해보시면됩니다. 읽어주셔서 감사합니다:)

https://reactrouter.com/web/guides/quick-start