React Router

 

리엑트 라우터란?

React SPA에서 라우팅을 위해 가장 많이 사용하는 라이브러리입니다.

 

 

화면에 따라 달라지는 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing) 이라고 합니다.

하지만 React 자체에는 이 기능이 내장되어 있지 않습니다.  직접 React Router를 이용해 주소마다 다른 뷰를 보여줘야 합니다.

 

• 설치하기 / 개발환경 구축하기

//터미널창
//simpleroute 폴더에 React App 설치

npx create-react-app@latest simpleroute

cd simpleroute  // 해당폴더로 이동

npm start // 잘 실행되는지 확인

npm install react-router-dom@^6.3.0 // 설치

//js 파일 상단에 넣기

// import 는 필요한 모듈을 불러오는 역할
// 비구조화 할당과 비슷하게 이용할 수 있다.


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

 

• 라우트 준비하기 (App.js에 페이지 표시 컴포넌트 작성)

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

 

• 메뉴 만들기

BrowserRouter 컴포넌트 적용 - Histroy  API 사용해 새로고침없이 주소변경 가능케 해준다.

<BrowserRouter> 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.

function App () {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>   
           {/* 주소 경로와 아까 만든 3개의 컴포넌트를 연결해 줍니다. */}
           {/* Routes 컴포넌트는 Route 컴포넌트들을 감싸고 있어야 합니다. */}
           {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Routes>
             <Route path="/" element={<Home />} /> 
             <Route path="/mypage" element={<MyPage />} /> 
             <Route path="/dashboard" element={<Dashboard />} />
          </Routes>
          
      </div>
    </BrowserRouter>
  )
}

export default App;

<BrowserRouter> index.js 에서도 쓰기 가능

<BrowserRouter> index.js 에서도 쓰기 가능

index.js 에서도 쓰기 가능

 

 

• Routes, Route - 경로를 매칭해주는 역할을 하는 컴포넌트이다.

<Routes> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.

<Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정한다.

아래에서 나올 <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다..

 

• Link

경로를 연결해 주는 역할을 하는 컴포넌트이다.

페이지 전환을 통해 새로  페이지를 불러오지 않고, 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 줍니다.

<ul>
 <li>
   <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
 </li>
 <li>
   <Link to="/mypage">MyPage</Link>
 </li>
 <li>
    <Link to="/dashboard">Dashboard</Link>
 </li>
</ul>

 

 

• 최종 결과 코드

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

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

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

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

export default App;