[React 숙련] React Router DOM 1 - hooks

조아영·2025년 3월 6일

📌

페이지 이동을 구현할 수 있게 해주는 패키지.
실제 웹 서비스에서는 여러 페이지를 오가며 이동하는 방식이 일반적임.
react-router-dom을 사용하면 여러 페이지를 가진 웹 구현 가능.

패키지 설치

npm install react-router-dom

사용방법

페이지 컴포넌트 생성
Router.js 생성 및 router 설정
App.js에 Router.js 적용

1. 페이지 컴포넌트 생성

여러 페이지 이동을 위한 가상 페이지 생성.
Home, About, Contact, Works 총 4개의 컴포넌트 생성.
src/pages 폴더 하위에 생성.

2. Router.js 생성 및 router 설정

URL에 따라 원하는 페이지 컴포넌트로 이동하게 만드는 역할.
URL 1개당 하나의 페이지 컴포넌트를 매칭. 이 하나의 URL을 Route라고 부름.
여러 Route를 관리하는 코드는 보통 Router.js로 분리.

// src/shared/Router.js

import React from "react";
// react-router-dom을 사용하기 위해 아래 API들을 import
import { BrowserRouter, Route, Routes } from "react-router-dom";
// 페이지 컴포넌트 import
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

BrowserRouter를 Router로 감싸는 이유는
SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들기 위해.
즉, 페이지 이동 시 새로고침 없이 화면 전환 가능.

path=”” : URL 주소
element={} : 해당 주소에서 보여줄 컴포넌트

3. App.js에 Router.js 적용

import React from "react";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

App.js는 프로젝트 최상위 컴포넌트. 모든 화면 렌더링은 App.js를 반드시 거침.
따라서 URL 분기 처리를 담당하는 Router를 App.js에 배치.
모든 사용자가 App → Router 흐름을 거치도록 구성.

◼ hooks

React에서 useState와 같은 hook을 제공하는 것 처럼
react-router-dom에서도 전용 hook 제공.

useNavigate

다른 페이지로 이동할 때 사용하는 hook.
브라우저 주소창에 직접 path 입력하는 방식은 실사용에 부적합.
일반적으로 버튼 클릭 또는 컴포넌트 클릭으로 페이지 이동 처리.
이때 사용하는 것이 useNavigate

// src/pages/home.js

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

const Home = () => {
	// navigate 생성
  const navigate = useNavigate();

  return (
	  // navigate("이동할 URL") 호출
    <button
      onClick={() => {
        navigate("/works");
      }}
    >
      works로 이동
    </button>
  );
};

export default Home;

useLocation

현재 위치한 페이지의 정보 조회 가능.
URL 정보 기반 조건부 렌더링 등에 활용.

// src/pages/works.js

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

const Works = () => {
  const location = useLocation();
  console.log("location :>> ", location);
  
  return (
	  // pathname을 활용해 현재 페이지 정보 출력 가능.
    <div>
      <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
    </div>
  );
};

export default Works;

Link

Hook은 아니지만 반드시 알아야 할 API. HTML의 a 태그를 대체하는 컴포넌트.
JSX에서 페이지 이동 시 a 태그 사용 금지. a 태그 사용 시 페이지 새로고침 발생.

새로고침 시

모든 컴포넌트 재렌더링
Redux나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화

즉, 성능 저하 발생

// src/pages/works.js

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

const Works = () => {
  const location = useLocation();
  console.log('location :>> ', location);
  return (
    <div>
      <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
      <Link to="/contact">contact 페이지로 이동하기</Link>
    </div>
  );
};

export default Works;