React - 라우팅 (Router)에 대한 기초적인 정보와 사용 하기 : React-Router-Dom

서론

웹 애플리케이션 개발에서 사용자 경험은 매우 중요합니다. 이를 위한 핵심 요소 중 하나가 바로 '라우팅'입니다. React Router는 React 애플리케이션에서 라우팅을 쉽고 효율적으로 관리할 수 있는 강력한 라이브러리로 React를 하게 된다면 우선적으로 사용하게 될 라이브러리이기도 합니다. 그렇기 때문에 오늘은 Router에 대해 얘기를 해보도록 하겠습니다.

 

Router란?

Router는 애플리케이션 내에서 네비게이션을 관리하기 위해 설계된 오픈 소스 라우팅 라이브러리입니다.

React 애플리케이션에서 동적 라우팅 환경을 만들 수 있으며, 해당 내용은 URL 경로에 따라 다른 콘텐츠를 표시할 수 있습니다.

 

예를 들어 보겠습니다.

일반적으로 URL 주소는 작성한 파일명칭을 따라 표시가 되는걸 보실 수 있습니다.

만약, 우리가 게시판을 만들기 위해 파일명을 board라고 지정해줬지만, 해당 게시판이 공지사항일 경우

Router을 활용하여 URL 주소상으론 notice로 표시를 할 수 있다는 소리입니다. 

그럼 조금 더 자세하게 Router에 대해 이야기를 해보도록 하겠습니다.

 

React Router의 기본 이해

React Router는 사용자가 애플리케이션 내에서 페이지를 이동할 때, 서버로의 요청 없이 클라이언트 사이드에서 라우팅을 처리합니다. 이는 애플리케이션의 성능을 향상시키고 사용자 경험을 개선하는 데 중요한 역할을 합니다.

 

주요 특징

• 동적 라우팅: 앱이 렌더링될 때 계산되는 동적 라우팅을 지원합니다.
• 선언적 라우팅: React 컴포넌트에 라우트를 매핑할 수 있도록 선언적 접근 방식을 사용합니다.
• 중첩 라우트: UI 계층 구조를 나타내는 중첩 라우트를 만들 수 있습니다.

주요 컴포넌트

• BrowserRouter & HashRouter: SPA에서 URL을 관리하는 두 가지 방식입니다.
• Route & Switch: 특정 URL에 대응하는 컴포넌트를 렌더링합니다.
• Link & NavLink: 사용자 네비게이션을 위한 컴포넌트입니다.

 

React Router 설정하기

Router에 관하여 대략적인 내용을 마무리 하였으니, 이제 해당 Router를 사용하는 방법에 대해 이야기를 해보겠습니다.

우선 Router를 사용하기 위해서는 npm이나 yarn을 통해 설치해야 합니다.

npm install react-router-dom

yarn add react-router-dom

 

기본 라우팅 구현하기

React Router 설정은 Router.jsx (파일명은 보기 편하기 위해 Router로 작성합니다. )

파일에서 이루어집니다. 이 파일은 라우팅을 구성하고 필요한 모든 설정을 포함합니다.

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from "./Home"; // 홈 페이지 컴포넌트 import
import About from "./About"; // 소개 페이지 컴포넌트 import

function Router() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">홈</Link>
          <Link to="/about">소개</Link>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default Router;

 

이 Router.jsx 파일에서 주요한 내용은 다음과 같습니다:

• BrowserRouter as Router : HTML5 히스토리 API를 사용하여 라우터를 설정합니다.
• <Link> : 네비게이션 링크를 생성하며, 클릭하면 지정한 경로로 이동합니다.
• <Route> : 지정된 경로에 따라 컴포넌트를 렌더링합니다.

<nav>와 <Route> 사용 사례 및 차이점

• <nav> : 사용자에게 다른 페이지로 이동할 수 있는 링크를 제공하는데 사용됩니다. 위의 예제에서는 <Link> 컴포넌트를 사용하여 홈 페이지와 소개 페이지로의 링크를 생성하고 이를 <nav> 요소 내에 배치했습니다. 이렇게 생성된 링크를 클릭하면 해당 페이지로 이동할 수 있습니다.
• <Route> : URL 경로와 연결된 특정 컴포넌트를 렌더링하는데 사용됩니다. Router.jsx 파일에서 <Route> 컴포넌트를 사용하여 경로에 따라 홈 페이지와 소개 페이지에 대한 렌더링 설정을 하였습니다. <Route>는 사용자가 특정 경로로 이동할 때 해당 경로와 일치하는 컴포넌트를 화면에 렌더링합니다.

간단한 요약:

• <nav> 는 링크를 생성하여 사용자에게 페이지 이동을 허용합니다.
• <Route> 는 URL 경로와 연결된 컴포넌트를 화면에 렌더링합니다.

이를 통해 사용자는 <nav>를 통해 다른 페이지로 이동하고, <Route>를 통해 해당 페이지가 화면에 표시되는 원리를 이해할 수 있습니다. 이러한 기본 구성을 바탕으로 더 복잡한 라우팅 구현 및 페이지 이동을 확장할 수 있습니다.

 

실제 사용 사례 및 코드 예시

1. 라우팅 설정 :

// 기본 라우팅 구조 설정 예시
<BrowserRouter>
    <Routes>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
  </Routes>
</BrowserRouter>

 

2. 페이지 이동 :

// 사용자가 다른 페이지로 이동할 수 있는 링크 생성
<nav>
  <Link to="/">Home</Link>
  <Link to="/about">About</Link>
</nav>

 

 

여기서 페이지 이동을 위해서는 Link 말고는 따로 없을까? 라고 생각을 들 수 가 있습니다.

왜냐하면 결과적으로 Link는 태그형식이기 때문에 스크립트를 적용하여 사용하고 싶을땐 곤란하기 때문입니다.

여기서 react-router-dom에서 제공하는 useNavigate를 활용하는 방법이 존재합니다.

 

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const onClick = () => {
  navigate('/');
}

// 버튼 클릭을 통한 페이지 이동
<button onClick={onClick}>
  Go to New Page
</button>

 

Navigate 활용 방법

• replace : 기본값은 false이며, true로 설정한다면 이동 후 뒤로가기가 불가능해집니다.
• state : 페이지 이동할 때 필요한 state 값을 전달해줄 수 있습니다.

replace 예제

navigate("/", { replace: true });

 

state 예제

navigate("/", { state: { cardId: cardId } });

//state값을 받은 페이지에서 호출
import { useNavigate, useLocation } from "react-router-dom";

const location = useLocation();
const { cardId } = location.state;

 

 

Params 활용 방법

Params는 URL 경로의 일부로 전달되는 동적인 값입니다.

예를 들어, /profile/:userId와 같은 경로는 userId라는 Params를 포함하고 있어, 사용자마다 다른 페이지를 보여줄 수 있습니다.

 

• 경로 정의하기: <Route> 컴포넌트를 사용해 동적인 부분을 콜론(:)과 함께 변수 이름을 사용하여 정의합니다. 예: /profile/:userId.
• Params 접근하기: useParams 훅을 사용해 현재 URL의 Params에 접근합니다. 이 훅은 Params를 객체 형태로 반환합니다.
• Params 활용하기: 추출한 Params는 API 요청, 특정 정보 표시 등에 사용될 수 있습니다.

예를 들어 localhost:3000/main/1

<Route path="/main/:id" element={<Main />} />

 

여기에서 :으로 구분해준 id라는 값은 파라미터로 전달됩니다.

이후 Main 컴포넌트 내부에서 useParams 훅을 통해 추출하고 사용할 수 있으며, 이때 전달된 값은 1이 됩니다.

 

useParams

그렇다면 설정한 파라미터 값을 사용하는 예제 또한 예시로 작성해보겠습니다.

위에서 말한 것처럼 url 파라미터를 조회할 때 useParams를 사용될 수 있습니다.

import React from 'react';
import { useParams } from 'react-router-dom';

const Main = () => {
  let { id } = useParams();

  return (
    <div className="test">
      <p>현재 페이지 파라미터 값은 { id } 입니다.</p>
    </div>
  )
}

export default Main;