프론트 입문 리액트 삽질기 7 - 라우팅 : React router - 1

Routing - 1

이 글은 Veloport님의 포스팅을 참조했습니다.

react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG

지난 글들을 통해 만든 프로젝트들은 모두 http://localhost:3000 경로에서만 동작했습니다.

리액트는 JavaScript 라이브러리로, 앵귤러같은 프레임워크와 달리 라우팅 기능이 기본적으로 탑재되어 있지 않습니다.

보통 리액트에서 라우팅 라이브러리로 많이 사용하는게 react-router, next.js 라고 하는데, veloport님께서 블로그에 정리해주신 내용이기도 하고, 또 대중적으로 많이 사용하는 라이브러리인 react-router를 사용해보려 합니다.

리엑트 프로젝트 디렉토리에서 yarn을 사용해 react-router-dom을 설치해 줍니다.

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

cross-env 를 설치한 다음에는 package.json의 scripts 부분을 수정합니다.

"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.js, App.css, App.test.js 를 삭제하고 다음와 같은 폴더 구조를 만들어 줍니다.

디렉토리 구조

shared/App.js를 다음과 같이 비워줍니다.

function App() {
    return (
        <div>
            Hello, World!
        </div>
    );
}

export default App;

 

client/Root.js를 다음과 같이 작성합니다.

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

function Root() {
    return (
        <BrowserRouter>
            <App />
        </BrowserRouter>
    );
}

export default Root;

react-route에서는 BrowserRouter를 다음과 같이 설명하고 있습니다.

React Router: Declarative Routing for React

<BrowserRouter>
A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

<BrowerRouter>
HTML 5 history API(pushState, replaceState, popState event)를 사용해 UI와 URL의 동기화를 맞춰주는 라우터 

즉 화면 깜빡임 없이 UI를 URL에 맞춰서 전환해주는 역할을 해 준다고 보면 됩니다.

 

function About() {
    return (
        <div>
            I'm sean-ma.
        </div>
    );
}

export default About;

function Home() {
    return (
        <div>
            This is Home-page!
        </div>
    );
}

export default Home;

를 작성해 주고,

 

index.js 를 수정해 줍니다.

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

이 상태 그대로 실행하면 다음과 같은 화면을 볼 수 있습니다.

localhost:3000

App.js 의 Hello world!를 확인할 수 있습니다.

이제 여기에 라우트를 삽입해 줍니다.

import { Fragment } from "react";
import { Route } from "react-router-dom"
import About from "../pages/About";
import Home from "../pages/Home";

function App() {
    return (
        <Fragment>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
        </Fragment>
    );
}

export default App;

 

이제 다음처럼 화면 라우트가 되는 것을 확인할 수 있습니다.

localhost:3000

localhost:3000/about

이제 Home에서 home <-> about 페이지 전환을 할 건데, 이 때 <a href = "localhost:3000/about" /> 을 사용하면 안됩니다.

리액트 라우트는 위에서 설명했듯 HTML5의 History API 를 사용하기 때문에, 화면 새로고침 없이 전환되기를 원한다면 <Link> 를 사용해 주어야 합니다.

App.js를 다음과 같이 수정합니다.

import { Fragment } from "react";
import { Link, Route } from "react-router-dom"
import About from "../pages/About";
import Home from "../pages/Home";

function App() {
    return (
        <Fragment>
            <Fragment>
                <Link to="/"> Home </Link>
                <Link to ="/about"> About </Link>
            </Fragment>
            <Fragment>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
            </Fragment>
        </Fragment>
    );
}

export default App;

 

Route 전환