React-Router-Dom 정리

Routing

• 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 조금 풀어서 얘기하면, 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다.
• React는 SPA(Single Page Application)로 구성되어 있기 때문에 경로가 변경된다고 페이지가 갈아 끼워지는 게 아닌, 컴포넌트가 갈아 끼워지게 된다.
• React는 프레임워크가 아닌 라이브러리이므로 vue나 angular처럼 내장 라우팅을 지원하지 않는다. 따라서, Router 라이브러리를 별도로 설치해 사용해야 한다.

---

React-Router-Dom

React 애플리케이션에서 페이지를 탐색할 수 있도록 도와주는 라이브러리

 

특징

• SPA 라우팅
  React 애플리케이션은 보통 하나의 HTML 페이지에서 실행되기 때문에, 페이지 전환 시 전체 페이지를 새로 로드하지 않고 필요한 부분만 업데이트하여 빠르고 부드러운 사용자 경험을 제공
• URL 기반 컴포넌트 렌더링
  URL 경로에 따라 다른 컴포넌트를 렌더링 할 수 있어, 사용자가 방문한 경로에 따라 애플리케이션의 상태를 관리하고 다양한 페이지를 제공할 수 있다
• 동적 라우팅
  동적으로 URL을 변경하고, 그에 따라 필요한 데이터를 로드하거나 컴포넌트를 바꿔 렌더링 할 수 있다
• 브라우저 히스토리 관리
  브라우저의 히스토리 API를 사용하여 사용자가 뒤로 가기, 앞으로 가기 등의 내비게이션을 쉽게 사용할 수 있다
• 링크와 내비게이션 지원
  SPA 특성상, 전통적인 앵커 태그 대신 React-Router-Dom의 Link 컴포넌트를 사용하여 페이지 전환을 관리하고, 사용자가 링크를 클릭할 때 전체 페이지를 리로드 하지 않도록 한다
• 쉽게 사용 가능한 Hook 제공
  useHistory, useLocation, useParams, useRouteMatch 등 다양한 Hook을 통해 라우팅과 관련된 정보를 쉽게 가져올 수 있다

설치

npm install react-router-dom

 

컴포넌트

• BrowserRouter
  • HTML5의 히스토리 API를 사용하여 브라우저의 주소를 관리
  • 애플리케이션의 최상위 컴포넌트로 사용되며, 내부에 라우팅 관련 컴포넌트를 배치한다
• Routes
  • 다양한 경로에 대해 렌더링할 컴포넌트를 정의한다
  • <Routes> 안에 여러 개의 <Route>를 포함하여 경로별로 다른 컴포넌트를 렌더링 한다
• Route
  • 특정 경로에 대해 렌더링 할 컴포넌트를 정의
  • path 속성에는 경로를 지정한다
  • element 속성에는 path 경로로 요청이 들어왔을 때 렌더링할 컴포넌트를 지정한다

import React from 'react';
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
import LoginPage from './pages/LoginPage';
import MainPage from './pages/MainPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/main" element={<MainPage />} />
        <Route path="*" element={<Navigate to="/login" />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

• Link
  • HTML의 앵커 태그와 유사하지만, 전체 페이지를 새로 고침 하지 않고도 SPA에서 경로를 변경할 수 있다
  • to 속성을 사용하여 이동할 경로를 지정
  • 계층 구조에 상대적이다. 상대 경로 표현이 가능하므로, ./.. 과 같은 표현도 사용이 가능하다.
  • useLocation 훅과 연계하여 특정 state를 넘겨주는 것도 가능하다.

<Link to="경로">링크 이름</Link>

 

Hook

useLocation

• 현재 위치 객체를 반환한다
• 이 객체를 통해 현재 URL의 경로, 검색 문자열, 해시 및 상태 정보에 접근할 수 있다
  • pathname: 현재 경로의 문자열
  • search: URL의 검색 문자열(쿼리 매개변수 포함)
  • hash: URL의 해시 부분
  • state: useNavigate를 통해 전달된 상태 정보

Example

import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();

  return (
    <div>
      <p>현재 경로: {location.pathname}</p>
      <p>검색 문자열: {location.search}</p>
      <p>해시: {location.hash}</p>
      <p>상태: {JSON.stringify(location.state)}</p>
    </div>
  );
};

export default MyComponent;

 

 

useNavigate

• useNavigate 훅을 사용하면 프로그래밍 방식으로 페이지 이동을 구현할 수 있다. 예를 들어 특정 이벤트(onChange, onClick 등)가 발생했을 때 페이지 이동시킨다.
• <form> 태그의 기본 동작은 페이지 새로고침(reload)을 발생시키므로, onSubmit에서 기본 동작을 막아야 함
• state를 전달할 수 있다.

Example

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

const navigate = useNavigate();

const handleLogin = async (e) => {
    
    //로그인
    
    //메인화면 이동
    navigate('/main', { state: { message: 'Hello Main Page' } });
};

...

---

마무리

React-Router-Dom 라이브러리를 사용하여 최종적으로는 로그인시 화면이동하는 로직을 구현할 것이다.

 

이전글

• React 설치 및 실행 / 프로젝트 구조 정리
• React CORS 설정 - 프록시 (http-proxy-middleware)
• React Hook 기본 정리 / Custom Hook

다음글

• React axios 모듈화

• React Modal 구현하기 (Alter, Loading)
• React 로그인 구현 (JWT)