React #10

React Router

라우팅 (Routing)

주소에 따라 내용을 다르게 보여준다

React 자체에는 이 기능이 없다
= React Router 라는 라이브러리를 많이 사용

React Router 설치

npm을 통해 설치하고

npm install react-router-dom

활용할 React에서 다음과 같이 불러온다

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

주요 컴포넌트

• <BrowserRouter>
• <Switch>, <Route>
• <Link>

BrowserRouter

HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게한다

• 모든 라우팅용 컴포넌트는 이 컴포넌트 안에 들어간다

Switch, Route

경로를 매칭해 주는 컴포넌트

• <Switch> : 여러 <Route> 중 경로가 일치하는 단 하나의 라우터만 렌더링
  - 없으면 매칭되는 모든 요소를 렌더링
  - 이 태그 안에 <Route>를 쓴다
  
• <Route> : path으로 해당 path에 어떤 컴포넌트를 보여줄지 지정
  - <Link>가 정해주는 URL 경로와 일치하는 경우에만 작동
  = 주어진 경로가 더 길어도 된다
  • exact 속성을 주면?
    주어진 경로가 완벽히 일치해야 한다

Link

경로를 연결해주는 컴포넌트
애플리케이션을 그대로 유지하면서 페이지의 주소만 변경

• <a>와 비슷한 느낌
  - <a href="주소"> = <Link to="주소">

• 렌더 되면 <Link> 컴포넌트는 <a> 태그로 바뀐다

<a> 태그는 페이지 전환 과정에서 새로고침이 일어나게 되지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문

예시 코드

import React from 'react'
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;