0. 리액트 라우터 소개, 설치 및 설정

안녕하세요, 프로독학러 입니다.

이 카테고리에서는 리액트 라우터(version_4 이상)에 대해서 배워보도록 하겠습니다.

포스팅의 내용은 Velopert 님의 리액트 라우터 강의를 복습한 내용이므로 Velopert 님의 원본 강의를 듣고싶으신 분들은 아래의 링크를 참조해 주세요.

<Velopert 님의 리액트 라우터 강좌> https://velopert.com/3411

1) 리액트 라우터의 효용

리액트 라우터는 SPA(Single Page Application)를 리액트를 통해 구현하는데 필요한 라이브러리입니다.

SPA 와 반대되는 개념은 전통적인 웹 어플리케이션 입니다.

전통적인 웹 어플리케이션은 여러 페이지로 구성되어 있으며, 한 페이지에서 다른 페이지로 이동할 때 페이지 전체를 다시 렌더링 합니다.

이런 방식의 전통적인 웹 어플리케이션의 렌더링은 페이지를 로딩할 때 마다 서버로 부터 리소스를 받아 해석한 뒤 진행됩니다.

즉, 렌더링을 하는데 서버쪽의 자원을 사용하는 것이지요.

이렇게 서버측의 자원을 사용하여 렌더링 하는 것은 불필요한 트래픽이 발생할 수 있고, 서버의 속도를 저하시키는 원인이 되기도 합니다.

이런 서버사이드 렌더링 문제를 해결하기 위해 우리는 리액트와 같은 라이브러리/프레임워크를 사용하여 뷰 렌더링을 유저의 브라우저가 담당하도록 합니다. 어플리케이션을 유저의 브라우저에 로드한 다음에 필요한 데이터만 전달받아 보여주는 방식을 취하는 것이죠.

라우팅은 주소에 따라 다른 뷰를 보여주는 기능을 의미합니다. 하지만 리액트 자체에는 이 기능이 내장되어 있지 않기 때문에 써드 파티 라이브러리인 리액트 라이브러리를 통해 구현합니다. 

즉, SPA 를 만드는데, 주소에 따라 다른 뷰를 보여주는 어플리케이션은 만든다고 하면 리액트 라우터는 필수 라이브러리 입니다.

* 리액트 라우터는 react-native 에서도 사용할 수 있습니다.

위의 글을 통해 보면, SPA는 전통적인 웹 어플리케이션에 비해 장점만 있는 것 같이 보입니다만, SPA 역시 단점을 가지고 있습니다.

SPA 는 모든 정보를 자바스크립트 파일로 불러오기 때문에, 어플리케이션의 규모가 커지면 파일의 크기가 너무 커지는 단점을 가지고 있습니다. 또한, 유저가 방문하지 않을수도 있는 페이지에 관련된 정보까지 모두 불러오기 때문에 로딩 속도가 늘어날 수도 있습니다.

하지만 Code Splitting 을 이용한다면 라우트 별로 파일을 나눠서, 트래픽과 로딩속도를 개선할 수 있습니다.

2) 리액트 라우터 설치

본격적으로 리액트 라우터를 사용하기에 앞서, 실습에 필요한 파일을 준비해 봅시다.

* 본 포스팅에서는 패키지 매니저로 npm 을 사용했지만, yarn 을 이용해도 상관없습니다.

리액트 라우터를 빠르게 실습해 보기 위해서 create-react-app 을 이용하겠습니다.

* webpack 을 사용하도 상관 없습니다만, 설정하는 부분에서 시간이 많이 소요되기 때문에 빠르게 리액트 프로젝트를 시작할 수 있는 create-react-app 을 이용하겠습니다.

create-react-app 을 npm 을 이용하여 설치해 줍니다.

npm install -g create-react-app

*create-react-app 이 설치 되어있는지 확인하고 싶다면 npm create-react-app -v 를 입력하여 버전을 확인합니다.

프로젝트를 생성할 디렉토리로 이동하여, create-react-app 을 이용하여 프로젝트를 생성합니다.

(저는 E 드라이브에 react-router-tuts 라는 프로젝트를 생성했습니다.)

create-react-app PROJECT_NAME

설치가 완료되면, 다음과 같은 화면이 뜹니다.

이제부터 E: 의 react-router-tuts 경로에서 npm start 명령어를 통해 개발서버를 실행시킬 수 있습니다.

이제 react-router-dom 과 cross-env 를 우리의 프로젝트에 설치해 줍니다.

npm install --save react-router-dom

npm install --save-dev cross-env

react-router-dom 은 브라우저에서 사용되는 리액트 라우터이고, 

cross-env 는 운영체제별 환경변수 설정을 공통적인 방법으로 할 수 있도록 도와주는 라이브러리입니다.

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

create-react-app 으로 생성된 프로젝트 파일에서 불필요한 파일은 삭제하고, 필요한 디렉토리를 생성해 줍시다.

제거할 파일

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

디렉토리 생성

• src/components : 컴포넌트들이 위치할 디렉토리
• src/pages : 라우트들이 위치할 디렉토리
• src/client : 클라이언트(브라우저) 측에서 사용할 컴포넌트가 위치할 디렉토리
• src/server : 서버측에서 사용할 리액트 관련코드가 위치할 디렉토리
• src/shared : 서버와 클라이언트 공용으로 사용될 컴포넌트가 위치할 디렉토리
• src/lib : 웹 연동을 구현할 때 사용할 API 와, 코드스플리팅을 위한 코드가 위치할 디렉토리

NODE_ENV 설정

프로젝트에서 컴포넌트를 import 할 때의 루트경로를 src 디렉토리로 설정하기 위해 package.json 파일의 script 부분을 아래와 같이 수정합니다.

(package.json)

"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"
}

4) 컴포넌트 준비

비어있는 App 컴포넌트를 만들어줍시다. 

App 컴포넌트는 서버와 클라이언트에서 공용으로 사용하는 컴포넌트이므로, src/shared 디렉토리에 생성해 줍니다.

(src/shared/App.js)

import React, { Component } from 'react';
 
class App extends Component {
    render() {
        return (
            <div>
                Hello React-Router
            </div>
        );
    }
}
 
export default App;

App 컴포넌트를 생성했으면, 루트 컴포넌트를 만들어줍시다.

Root 컴포넌트는 App 컴포넌트를 렌더링 하며, BrowserRouter 를 적용합니다.

또한, Provider 를 통해 프로젝트에 리덕스를 연결해 줍니다.

(src/client/Root.js)

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from 'shared/App';
 
const Root = () => (
    <Router>
        <App/>
    </Router>
);
 
export default Root;

지금까지 만든 컴포넌트들에 맞춰 index.js 파일을 수정합니다.

(src/index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './client/Root';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
 
ReactDOM.render(<Root />, document.getElementById('root'));
registerServiceWorker();

위 코드의 3번째 줄에서 Root 컴포넌트를 불러와 7번째 줄에서 렌더링 했습니다.

여기까지 완료했으면, 정상적으로 잘 작동되는지 개발서버를 통해 확인해 봅시다.

(프로젝트 폴더의 경로에서 실행시켜야 합니다. 저의 경우에는 E:\react-router-tuts 에서 실행)

npm start

위의 그림과 같이 App 컴포넌트에서 입력한 Hello React-Router 가 표시되면 정상적으로 뜨면 됩니다.

여기까지...

리액트 라우터에 대한 설명과, 설치 및 설정을 완료하였습니다.

다음 포스팅에서는 리액트 라우터의 Route 와 파라미터에 대해서 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://velopert.com/3417

*이 포스팅이 도움이 되셨다면 다녀가셨다는 표시로 공감 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)