13. boilerplate - react router dom

boilerplate 유튜브 강의 시리즈

Blog ReactJS NodeJS #20 REACT ROUTER DOM

React-Router-DOM 이란?

리액트 라우터는 리액트의 서드파티 라이브러리로 화면전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 리액트 라우터를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로, 페이지 이동 시에도 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다. 사실 리액트 라우터 없이도 컴포넌트 업데이트를 통해 화면전환을 할 수 있다. 그럼에도 리액트 라우터를 사용하는 이유는 사용자에게 새로고침, 뒤로가기, 즐겨찾기 등의 기능을 제공하기 위함이다.

리액트는 Single Page Application이다. 예를 들어 어떤 웹사이트가 소개, 내용, 연락처라는 3개의 페이지로 구성되어 있다고 하면, HTML파일 3개를 생성하는 것이 아니라, 1개의 HTML파일을 제어하여 공통적으로 들어가는 Header와 Footer를 제외한 중간 컨텐츠 부분을 교체해주는 방식이라고 생각하면 될 것 같다. (출처: 여기)

 

react router 참고 사이트

 

react-router-dom을 설치한다.

npm i react-router-dom --save

 

client폴더 루트 index.js에  react-router-dom의 BrowserRouter를 import하고

render 안에 적용한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom';

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

reportWebVitals();

 

App.js에도 Route와 Switch를 import하여 라우터 역할을 하도록 한다.

about 페이지를 만들 것이기 때문에 about을 추가해 본다.

import React from 'react';
import {Route, Switch} from 'react-router-dom';
import About from './about';

function App() {
  return (
    <div>
      <Switch>
        <Route path="/about" component={About}/>
      </Switch>
    </div>
  );
}

export default App;

 

위에서 추가한 about 페이지를 만들기 위해

components 폴더에 about 폴더를 만들고 index.js를 추가한다.

이제 about/index.js를 작성해야 하는데 그 전에

vscode를 사용하는 경우 아래 확장 프로그램을 설치하면 코드 생산성을 높일 수 있다.

 

rcc를 입력하고 enter를 누르면 클래스 컴포넌트의 뼈대가 자동 완성된다.

여기서 index 부분만 About으로 변경해준다.

import React, { Component } from 'react';

class About extends Component {
    render() {
        return (
            <div>
                This is the about page ~
            </div>
        );
    }
}

export default About;

 

실행한 후 /about으로 접속해본다.