[React] React Router 사용하기

리액트를 사용할 때 HTML 의 <a> 태그 처럼 페이지를 이동해야 경우에는 React Router 를 사용해야 합니다. 

오늘은 리액트에서 페이지 이동을 처리하는 방법인 React Router 대해 공부해보겠습니다 ! 

 

먼저 라우팅이라는 용어가 익숙하지 않을텐데 쉽게 설명하자면 사용자가 요청한 URL에 따라 다른 뷰를 보여주는 것으로 React Router 는 리액트에서 가장 많이 쓰이는 라우팅 라이브러리 입니다. (리액트 자체에는 이 기능이 내장되어 있지 않음 )

 

리액트는 SPA 방식을 채택하고 있어 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태입니다. 

이러한 특징을 고려하여 React Router 는 페이지를 새로 로드하지 않고 하나의 페이지 내에서 렌더링 해줍니다. 

 

SPA 란 ?
서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트 

 

 

React Router 주요 컴포넌트 

BrowerRouter : 라우터 역할 

Routers , Route : 경로 매칭 

Link : 경로 변경 

 

위의 컴포넌트들을 사용하기 위해선 import가 필수 ! ( import 전 라이브러리 설치는 기본  )

npm install react-router-dom@^6.3.0  // 사용할 버전 입력

import {BrowerRouter, Routes, Route, Link } from "react-router-dom";

 

<BrowerRouter > 

History API 를 사용해 페이지를 새로고침하지 않아도 주소를 변경할 수 있게 해줍니다.

<BrowerRouter>는 가장 상위에 작성되어야 합니다. 

function App () {
  return (
    <BrowserRouter>  //상위에 작성 
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
    </BrowserRouter>
  )
}

export default App;

 

<Routers, Route > 

경로를 매칭해주는 역할입니다. 

<Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그 중 경로가 일치하는 하나의 라우터만 렌더링 시켜주는 역할을 합니다. 만약 <Routes> 를 사용하지 않는다면 매칭되는 모든 요소를 렌더링 합니다. 

<Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다. <Link>컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동합니다. 

TIP ! 

path= "*" 를 사용한다면 지정되지 않은 주소로 접근할 시 이 속성이 설정되어 있는 컴포넌트를 보여줍니다. 

function App () {
  return (
    <BrowserRouter>  //상위에 작성 
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      <Routes>
          {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App;

 

<Link>

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

페이지 전환을 통해 페이지를 새로 불러오지 않고 페이지의 주소만 변경해줍니다. 

<Link> 의 to 속성을 활용하여 Route 컴포넌트에 설정해준 path 주소를 연결해줍니다. 

 

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;

 

 

1. React Router 라이브러리 설치
2. 모듈 사용을 위한 import 
3. 가장 상위에 <BrowerRouter> 사용
4. <Routes>로 <Route> 감싸기
5. <Route>에 path 설정 및 element 지정 
6. <Link> 로 <Route> 경로와 연결