React Routing

Single Page Application & Routing

사용자는 네비게이션 기능(브라우저의 뒤로가기, 앞으로가기)을 활용해서 SPAs에서도 편리하게 여러가지 화면을 접근해서 볼 수 있어야 한다.

React-router에서의 Routing

React에 어울리는 라이브러리 중 react-router가 대표적.react-router 에는 Link컴포넌트와 Route컴포넌트가 있음.

1. pushState를 활용해 history를 저장하는 컴포넌트=> <Link>
2. popstate를 통해 navigation 변화가 발생하면 event.state값을 받아 다시 렌더링 하는 컴포넌트=> <Route>

Router 컴포넌트

라우터를 사용하기 위해선 상위 컴포넌트에서 정의해야 한다.

import React from 'react';
import { HashRouter as Router } from 'react-router-dom';
import Routes from './routes';

function App() {
  return (
    <Router>
      <Routes />
    </Router>
  );

1. BrowserRouter
   • Link 컴포넌트 to속성에 이동할 경로 기술
   • Route 컴포넌트 path속성을 Link의 to속성과 매핑 component에 컴포넌트 경로 기술
   • 새로고침 하면 경로 못찾아서 에러남 → 추가 설정 필요
2. HashRouter
   • 주소에 해쉬(#)이 붙음
   • 새로 고침해도 그대로 나옴 -> #뒤에는 화면에서 읽는 경로이기 때문
   • 검색엔진으로 못읽는 단점때문에 거의 안씀

Link 컴포넌트

Link컴포넌트는 anchor 태그와 비슷한 역할이라 해당 path에 일치하는 컴포넌트를 렌더링한다.

동시에 브라우저의 history를 추가한다.

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>
    </div>
  </Router>
)

Route 컴포넌트

Route 컴포넌트는 popstate가 발생할때마다 자신의 path정보와 일치하는 경우(매칭과정을거쳐)

자신이 가지고 있는 component를(About, Users,Home) 렌더링(React.createElement())한다.

import { Login, Issue } from './pages';
// 각 path에 해당하는 component 렌더링
// <Switch>는 하위 Route 중 매칭되는 첫번째 컴포넌트 렌더링한다.
// exact 붙이지 않으면 '/issues'도 '/'를 포함하므로 '/'에 해당되는 컴포넌트를 렌더링하게 된다.
<Switch>
    <Route exact path='/' component={Login}/>
    <Route path='/issues' component={Issue}/>
    <Route component={NoMatch}/>
 </Switch>
// 마지막까지 매칭되는 Route가 없으면 Not Found 뜨도록 NoMatch 컴포넌트 렌더링

🔗참고

https://velopert.com/3417

https://poiemaweb.com/js-spa

https://lucas.codesquad.kr/boostcamp-2020/course/그룹-프로젝트/FE학습자료/React-Router