프로젝트 준비하기

일단, 리액트 라우터를 사용하여 라우팅을 하는 간단한 프로젝트를 생성해봅시다.

먼저 CRA 를 사용하여 프로젝트를 생성하세요.

$ yarn create react-app ssr-and-splitting

그 다음에 react-router-dom 을 설치하세요.

$ cd ssr-and-splitting
$ yarn add react-router-dom

이제 라우트를 위한 컴포넌트를 만들고 리액트 라우터를 프로젝트에 적용하겠습니다.

다음 컴포넌트들을 순서대로 만들어보세요.

우리가 사용 할 컴포넌트들을 components 디렉터리에 만드세요. 우리는 추후 CSS 파일의 코드 스플리팅도 신경을 써야 하니 정말 간단한 CSS 파일들도 준비를 해주겠습니다.

components/Red.js

import React from 'react';
import './Red.css';

const Red = () => {
  return <div className="Red">Red</div>;
};

export default Red;

#

components/Red.css

.Red {
  background: red;
  font-size: 1.5rem;
  color: white;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

components/Blue.js

import React from 'react';
import './Blue.css';

const Blue = () => {
  return <div className="Blue">Blue</div>;
};

export default Blue;

components/Blue.css

.Blue {
  background: blue;
  font-size: 1.5rem;
  color: white;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

다음 컴포넌트는 Link 를 보여주는 컴포넌트입니다.

components/Menu.js

import React from 'react';
import { Link } from 'react-router-dom';
const Menu = () => {
  return (
    <ul>
      <li>
        <Link to="/red">Red</Link>
      </li>
      <li>
        <Link to="/blue">Blue</Link>
      </li>
    </ul>
  );
};

export default Menu;

이제 페이지를 위한 컴포넌트들을 pages 디렉터리에 작성하세요.

pages/RedPage.js

import React from 'react';
import Red from '../components/Red';

const RedPage = () => {
  return <Red />;
};

export default RedPage;

pages/BluePage.js

import React from 'react';
import Blue from '../components/Blue';

const BluePage = () => {
  return <Blue />;
};

export default BluePage;

이제 컴포넌트는 다 만들어주었습니다! App 에서 라우트 설정을 합시다.

App.js

import React from 'react';
import { Route } from 'react-router-dom';
import Menu from './components/Menu';
import RedPage from './pages/RedPage';
import BluePage from './pages/BluePage';

const App = () => {
  return (
    <div>
      <Menu />
      <hr />
      <Route path="/red" component={RedPage} />
      <Route path="/blue" component={BluePage} />
    </div>
  );
};

export default App;

그리고, BrowserRouter 컴포넌트를 통하여 프로젝트에 리액트 라우터를 적용하세요.

index.js

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

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

이제 개발 서버를 실행해보세요. 페이지에 Red 와 Blue 링크가 보여지나요? 링크를 눌렀을때 컴포넌트들이 잘 보여지는지 확인해보세요.