개요

경로에 따라 다른 뷰를 보여주기 위해 사용하는 React Router 라이브러리에 대해서 학습합니다.

학습 목표

• React에서 npm으로 React Router를 설치하고 이용할 수 있다.
• React Router를 이용하여 SPA를 구현할 수 있다.
• 라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.

React Router

라우팅(Routing) : 다른 주소에 따라 다른 뷰를 보여주는 과정

• "경로에 따라 변경한다."
• SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하지 않습니다.
• 트위터를 예로 들때 1) 메인 트윗 모음 페이지 2) 알림 페이지 3) 마이 트윗 페이지 등의 화면이 필요할 수 있습니다.
• 1) xx.com/ 2) xx.com/notification 3) xx.com/mypage
• React 자체에 라우팅 기능이 내장되어 있지 않습니다.

React Router : 라우팅을 위해 가장 많이 사용하는 라이브러리

• 주요 컴포넌트
  • <BrowserRouter>
    • HTML5의 History API 사용 페이지를 새로고침하지 않고 변경합니다.

  • <Routes>
    • 여러 <Route> 컴포넌트를 감싸 경로가 일치하는 라우터에 렌더링합니다.

  • <Route>
    • path 속성을 지정하여 어떤 컴포넌트를 보여줄지 정합니다.
    • <link> 컴포넌트가 정해주는 URL 경로와 일치해야 작동합니다.
    • path="*" : 지정되지 않은 주소로 접근할 시에 이 속성이 설정되어 있는 컴포넌트를 보여주게 됩니다.

  • <Link>
    • HTML5 History API를 이용해 페이지의 주소만 변경해 줍니다.
    • ReactDOM 으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 요소로 바뀌게 됩니다.
      • <a> 요소는 페이지 전환 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링, 새로고침 현상 발생
      • <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA 구현 가능
    • <Link> 컴포넌트의 to 속성을 활용하여 <Route> 컴포넌트에 설정해 준 path 주소를 연결해 줍니다.

React Router 3가지 분류

• 라우터 역할 (Router)
  • <BrowserRouter>

• 경로를 매칭해주는 역할 (Route Matchers)
  • <Routes>
  • <Route>

• 경로를 변경하는 역할 (Route Changers)
  • <Link>

React Router 사용법

1. React Router 의 컴포넌트들을 불러옵니다.
       import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

2. React Router 문법에 따라 라우팅을 해줍니다.

// React Router 사용 예시

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

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<Mypage />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
        
      </div>
    </BrowserRouter>
  );
}

참조

코드스테이츠 프론트엔드 부트캠프