1-1. 프로젝트 구성하기

프로젝트 생성 및 라이브러리 설치

먼저 create-react-app 으로 프로젝트를 생성하세요.

$ create-react-app react-router-tutorial

그 다음엔, 해당 프로젝트 디렉토리로 이동하여 리액트 라우터를 설치하세요.

$ yarn add react-router-dom
$ yarn add cross-env --dev

react-router-dom: 브라우저에서 사용되는 리액트 라우터 입니다.
cross-env: 프로젝트에서 NODE_PATH 를 사용하여 절대경로로 파일을 불러오기 위하여 환경 변수를 설정 할 때 운영체제마다 방식이 다르므로 공통적인 방법으로 설정 할 수 있게 해주는 라이브러리입니다.

프로젝트 초기화 및 구조 설정

파일 제거

src/App.js
src/App.css
src/App.test.js
src/logo.svg

디렉토리 생성

src/components: 컴포넌트들이 위치하는 디렉토리입니다.
src/pages: 각 라우트들이 위치하는 디렉토리 입니다.
src/lib: 나중에 웹 연동을 구현 할 때 사용 할 API와 코드스플리팅 할 때 필요한 코드가 여기에 위치합니다.

NODE_ENV 설정

우리가 코드들을 불러올 때 '../components/Something' 이런식으로 불러와야 하는 코드를 'components/Something' 이렇게 불러 올 수 있도록 프로젝트의 루트경로를 설정하겠습니다. package.json 파일의 script 부분을 다음과 같이 수정하세요.

  "scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

컴포넌트 준비하기

먼저, App 컴포넌트를 만들어주세요. 어떤 주소로왔을때 무엇을 보여줄 지, 나중에 여기서 정의를 하도록 하겠습니다. 지금은 일단 비어있는 컴포넌트를 만드세요.

`src/App.js`

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                Hello React-Router
            </div>
        );
    }
}

export default App;

그 다음엔, Root 컴포넌트를 만드세요. 이 컴포넌트는 우리의 웹어플리케이션에 BrowserRouter를 적용합니다. 나중에 리덕스를 적용 하게 될 때, 여기서 Provider 를 통하여 프로젝트에 리덕스를 연결시켜줍니다.

`src/Root.js`

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const Root = () => (
    <BrowserRouter>
        <App/>
    </BrowserRouter>
);

export default Root;

이제 우리가 만든 파일에 맞춰서 index.js 를 수정하세요.

`src/index.js`

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './Root';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

ReactDOM.render(<Root />, document.getElementById('root'));
registerServiceWorker();

이제 개발서버를 실행시켜서 페이지에 Hello React Router 가 잘 뜨는지 확인하세요.

$ yarn start

자 이제 기본적인 설정이 완료되었으니 본격적으로 리액트 라우터를 사용해봅시다!

1-1. 프로젝트 구성하기