React-Router-DOM

React-Router-DOM

React Router는 React 애플리케이션에서 페이지 네비게이션을 처리하기 위한 라이브러리 중 하나다. React Router를 사용하면 싱글 페이지 애플리케이션(SPA)에서 페이지 간의 전환, URL과 컴포넌트 간의 매핑, 그리고 브라우저의 주소 표시줄을 업데이트할 수 있다.

React Router DOM은 React Router의 웹 버전으로, 웹 애플리케이션에서 라우팅을 담당한다. 주요 구성 요소로는 BrowserRouter, Route, Link, Switch, Redirect 등이 있다.

1. BrowserRouter: 브라우저 히스토리 API를 사용하여 UI와 URL을 동기화하는 컴포넌트이다. 앱을 BrowserRouter로 감싸면 브라우저 히스토리를 사용한 라우팅이 가능해진다.

2. Route: 특정 URL에 대한 컴포넌트 매핑을 정의한다. 예를 들어, 특정 경로에 해당하는 컴포넌트를 렌더링할 수 있다.

3. Link: 클릭하면 다른 경로로 이동하는 앵커 역할을 하는 컴포넌트이다. 일반적으로 내비게이션 메뉴나 페이지 간의 링크를 생성하는 데 사용된다.

4. Switch: 여러 Route 중에서 가장 먼저 매치되는 하나만 렌더링하도록 하는 컴포넌트이다. 순서대로 매치되는 Route를 찾고 나면 나머지는 무시한다.

5. Redirect: 사용자를 다른 경로로 리디렉션시키는 데 사용된다. 특정 조건에 따라 자동으로 다른 페이지로 이동하게 할 수 있다.

React-Router-DOM 사용하기

1. 터미널로 yarn add react-router-dom 설치한다.

2. 페이지 컴포넌트를 생성하기

 2-1. src 폴더에 pages 폴더를 생성한다. 단일페이지에서 다중페이지로 구성하기 위해 페이지 컴포넌트를 이곳에 작성해준다.

( ex. Home.jsx / About.jsx / Detail.jsx  ... )

3. Router.js 파일 생성하고 router를 구성하는 설정코드 작성하기

 3-1. src폴더에 shared폴더를 생성하고 shared폴더 안에 Router.js 파일을 생성한다.

 3-2. BrowserRouter, Routes, Route 를 impot한다.

 3-3. Router 함수를 생성하고 아래와 같이 구성한다.

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Detail from "../pages/Detail";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      {/* 각각의 route에 이동할 페이지 설정 */}
        <Route path="/" element={<Home />} /> 
        <Route path="detail" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}; //라우팅 설정 완료

export default Router; //설정한 router를 외부에서 사용가능하도록 export

 

4. export한  Router를 App.jsx 에서 import 하고 return 해준다.

import React from 'react'
import Router from './Router'
// import시 react-router-dom에서 제공하는 api가 아니라 우리가 만든 Router 받아오는 것 확인

function App() {
  return <Router />
}

export default App

 

React-Router-DOM HOOK

1. useNavigate: useNavigate를 호출하면 navigate 함수가 반환되며, 이 함수를 사용하여 경로를 변경할 수 있다.

 

2-1. useNavigate 사용해보기

  1 ) Home.js에 useNavigate를 import한다.

  2) useNavigate를 호출하여 navigate 함수를 선언한다.

  3) 이벤트 핸들러 내에서 navigate 함수를 사용하여 Detail 페이지로 이동하는 코드를 추가한다.

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

const Home = () => {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    // 클릭 이벤트 핸들러 내에서 navigate를 사용하여 Detail 페이지로 이동
    navigate('/detail');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleButtonClick}>Go to Detail</button>
    </div>
  );
};

export default Home;

 

2-2. Link

: react-router-dom의 hook은 아니지만 꼭 알아야 할 API

 

Link는 html 태그 중에서 a태그의 기능을 대체하는 API이다. 만약 JSX에서 a 태그를 사용해야 한다면, 반드시 Link를 사용하여  구현해야 한다. a태그를 사용하면 페이지 이동 시 브라우저가 새로고침되기 때문이다. 

브라우저가 새로고침되면 모든 컴포넌트가 리렌더링 되어야 하고, 리덕스나 useState을 통해 메모리상 구축해 놓은 모든 상태값이 초기화 된다. Link 컴포넌트를 사용하면 페이지 전환 시에 페이지 전체를 다시 렌더링하지 않고 필요한 부분만 업데이트하여 빠르게 네비게이션을 할 수 있다.

import React from 'react';
import { Link } from 'react-router-dom';
// Link import하기

const Navigation = () => {
  return (
    <nav>
      {/* to 속성에 이동할 경로를 지정 */}
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
};

export default Navigation;

이렇게 생성된 링크를 클릭하면 Link 컴포넌트는 내부적으로 라우터에 의해 페이지 전환이 이루어진다.
이 경로는 애플리케이션에서 설정한 라우트에 따라 달라진다.
페이지 간의 전환을 처리할 때 Link를 사용하면 페이지 간의 부드러운 전환 효과와 빠른 내비게이션이 가능하다.