React router

개요

이번 스터디 주제는 react router 이다.
프로젝트를 설계하던 중 탭 이동에 따른 다른 화면이 보여줘야 하는 부분이있어서, 리액트 라우터에 대해서 공부를 해봤다.

React router 란?

리액트에서는 페이지 이동 역할을 하는 a태그를 쓰지 않는다.
대신 react router를 사용한다.

react router 는 SPA 와 밀접한 관련이 있다. react-router 를 이용한 페이지의 이동은 서버에 대한 요청 없이도 페이지와 url 을 가상으로 옮길 수 있기 때문이다.

SPA는 일단 한번 필요한 스크립트를 다운로드 하면 다음에 링크 이동 했을 때 새로 보여줘야 할 내용을 이미 가지고 있기 때문에 굳이 서버에 요청할 필요가 없다. 요청할 필요가 있으면 ajax 를 이용한다.

리액트 라우터를 이용해 구현한 모든 링크 이동은 결국 하나의 페이지에서 이루어지는 것이고 이것은 SPA를 구현하는 핵심적인 기능이 된다.

SPA
Single Page Application (싱글 페이지 어플리케이션) 의 약자이다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻이다.

라이브러리 설치

$ yarn add react-router-dom

react-router-dom: 브라우저에서 사용되는 리액트 라우터.

Root 컴포넌트 만들기

Root 컴포넌트를 만든다. 이 컴포넌트는 우리가 만들 웹앱에 BrowserRouter를 적용한다.

src/client/Root.js

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

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

export default Root;

컴포넌트 준비하기

App 컴포넌트를 만든다. 어떤 주소로 왔을 때 무엇을 보여줄지 여기서 정의한다.

import React, { Component } from 'react';

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

export default App;

index.js 수정

우리가 만든 파일에 맞춰 index.js 를 수정한다.

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

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

개발서버 실행

개발서버 실행시켜 잘 뜨나 확인

$ yarn start

잘 뜨는 것은 확인 했으니
페이지 셋팅과 디테일은 내일 직접 해보면서 공부한다음 정리하도록하겠다.

Reference

https://velopert.com/3417
https://ko.reactjs.org/tutorial/tutorial.html
https://cocoder16.tistory.com/9