☁️ goormTIL | React #28

매루·2025년 10월 20일

DEEPDIVE_FE TIL goormTIL

goormTIL

목록 보기

26/67

📅 2025-10-20

➡️ React Router DOM에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

🔎 학습 리마인드

📌 React Router DOM

💡 react-router-dom이란?

리액트 프로젝트에서 페이지 이동(라우팅)을 가능하게 해주는 라이브러리
리액트는 SPA(Single Page Application ) 구조라서 실제로는 페이지가 하나임
하지만 사용자가 보기엔 여러 페이지가 있는 것처럼 보이게 만들 수 있는데 이걸 가능하게 하는 것이 바로 react-router-dom 패키지

설치

npm i react-router-dom

💡 기본 구조

BrowserRouter - 라우팅을 감싸는 최상위 컴포넌트 (SPA에서 페이지 새로고침 없이 이동 가능하게 됨)
Routes - 여러 개의 Route 묶는 컨테이너
Route - 특정 URL(path)에 어떤 컴포넌트를 보여줄지 정의

💡 사용 방법 순서

페이지 컴포넌트 생성
Router.js 생성 및 router설정 코드 작성
App.jsx 에 import 및 적용
페이지 이동 테스트

💡 react-router-dom hooks

useNavigate

페이지를 코드로 이동시킬 때 사용

navigate를 생성하고, navigate("보내고자 하는 url")을 이용해서 페이지 이동

// src/pages/Home.js
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate(); // 네비게이션 훅 생성

  return (
    <button
      onClick={() => {
        navigate("/works"); // 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);
  
  return (
    <div>
      <p>현재 페이지: {location.pathname}</p>
    </div>
  );
};

export default Works;

Link

리액트에서 <a> 태그 대신 사용하는 컴포넌트

<a>는 페이지 전체를 새로고침하지만, <Link>는 SPA 방식으로 이동함

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

const Works = () => {
  return (
    <div>
      <h2>Works 페이지</h2>
      <Link to="/contact">Contact 페이지로 이동</Link>
    </div>
  );
};

export default Works;

children

여러 페이지에 공통으로 포함되는 Header, Footer를 children props로 감싸 관리

// src/shared/Layout.jsx
import React from "react";

const Header = () => (
  <div style={{ background: "black", color: "white", padding: "10px 20px" }}>
    <h3>Goorm React</h3>
  </div>
);

const Footer = () => (
  <div style={{ background: "black", color: "white", padding: "10px", textAlign: "center" }}>
    copyright @SCC
  </div>
);

function Layout({ children }) {
  return (
    <div>
      <Header />
      <main style={{ minHeight: "80vh", padding: "20px" }}>{children}</main>
      <Footer />
    </div>
  );
}

export default Layout;

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import About from '../pages/About';
import Contact from '../pages/Contact';
import Home from '../pages/Home';
import Layout from './Layout';
import Works from '../pages/Works';

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

export default Router;