[React] DAY 8 - React Router

💡 무엇을 배울까

1. React Router란?
2. 설치 및 기본 설정
    2-1. 프로젝트 기본 구조 설정
    2-2. 라이브러리 설치
    2-3. 라우터 설정
3. 

 

---

📖 수업 내용

1️⃣ React Router란?

🔗 React Router 공식 문서

React Router Official Documentation

 

React Router는

React 애플리케이션에서 클라이언트 사이드 라우팅(Client-Side Routing)을 구현하기 위한 표준 라이브러리다.

또한, 웹 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있게 해준다.

 

🖐🏻 여기서 잠깐

라우팅이 뭔데? 🤔

-> 라우팅이란 웹 애플리케이션에서 URL에 따라 다른 콘텐츠를 사용자에게 보여주는 메커니즘이다.

 

전통적인 웹사이트에서는 각 URL이 서버에 있는 다른 HTML 파일을 요청하는 방식으로 작동했다.

🧪 예를 들어 :

• `example.com/home` -> 서버의 home.html 파일 요청
• `example.com/about` -> 서버의 about.html 파일 요청

즉, 페이지마다 서버에 요청하는 방식!!!

그래서 매번 새로고침을 하기 때문에 상대적으로 느리다.

 

반면,

React와 같은 단일 페이지 애플리케이션(SPA)에서는 클라이언트 사이드 라우팅이 사용된다.

⚛️ 클라이언트 사이드 라우팅 특징 :

1. 웹 애플리케이션이 처음 로드될 때 필요한 모든 JavaScript를 다운로드한다.
   -> 이후에는 서버로부터 전체 페이지를 다시 불러오지 않음.
2. URL이 변경되면 새로운 페이지를 서버에서 받아오는 대신, JavaScript가 브라우저의 히스토리 API를 사용하여 URL을 변경하고 화면에 표시되는 컴포넌트를 변경한다.
   -> 서버는 URL을 알지도 못함 -- 모든 건 클라이언트가 처리!
3. 페이지 전체를 다시 로드하지 않기 때문에 더 빠른 사용자 경험을 제공한다.
   -> `a href="/about"` 대신 `<Link to="/about" />`사용

 

그렇다면,

🌐 URL의 구조는 어떻게 구성될까? (더보기 참고)

https://example.com/product/view?category=book&id=123#details

1. 프로토콜(Protocol): `https://`
   -> HTTPS(Hypertext Transfer Protocol Secure)는 웹 브라우저와 웹 서버 간의 암호화된 통신을 제공하는 프로토콜
   -> 일반 HTTP와 달리 데이터가 암호화되어 전송되므로 보안이 강화됨
2. 도메인(Domain): `example.com` 
   -> 웹사이트의 주소를 나타내는 고유 식별자
3. 경로(Path): `/product/view`
   -> 웹사이트 내에서 특정 페이지나 리소스의 위치를 나타냄
4. 쿼리 스트링(Query String): `?category=book&id=123`
   -> 서버에 추가 정보를 전달하는 데 사용됨
   -> 주로 검색 조건, 필터링, 페이지네이션 등에 활용됨
5. 프래그먼트(Fragment): `#details`
   -> 페이지 내 특정 섹션으로 직접 이동할 때 사용됨

 

그래서,

✅ React Router의 주요 특징은

• SPA에서 다중 페이지 관리
  -> 실제로는 한 페이지지만, URL 경로에 따라 컴포넌트를 다르게 보여줘서 마치 여러 페이지처럼 동작
• 동적 라우팅 지원
  -> URL에 변수를 넣을 수 있어 `/user/:id` 형태로 다양한 사용자 페이지 표현 가능
• 중첩 라우팅 구현
  -> 부모-자식 관계의 라우트를 정의해서 공통 레이아웃 + 내부 콘텐츠 구조 구성
• 내비게이션 관리
  -> `<Link>`, `<NavLink>`, `navigate()` 등을 사용해 새로고침 없이 경로 전환 가능
• 경로 보호 기능
  -> 로그인한 사용자만 접근 가능한 페이지를 `PrivateRoute` 등으로 보호 가능

 

---

2️⃣ 설치 및 기본 설정

# 프로젝트 기본 구조 설정

├─src/
│  ├─routes/
│  │  ├─pages/
│  │  │  ├─MainPage.jsx
│  │  │  ├─AboutPage.jsx
│  │  │  ├─ShopPage.jsx
│  │  │  ├─BlogPage.jsx
│  │  │  └─NotFoundPage.jsx
│  │  └─index.jsx
│  └─main.jsx

---

# 라이브러리 설치

npm i react-router-dom axios json-server

패키지 이름	역할
`react-router-dom`	리액트 전용 라우팅 라이브러리 (SPA에서 URL 경로에 따라 화면 전환을 가능하게 함)
`axios`	HTTP 통신을 위한 라이브러리 (`fetch`보다 사용 편리, 비동기 API 호출에 많이 사용)
`json-server`	가짜 REST API 서버 생성용 툴 (빠르게 Mock 서버 만들 때 사용)

 

---

# 라우터 설정

🧩 `routes/index.jsx`

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import Default from "./layouts/Default";
import MainPage from "./pages/MainPage";
import AboutPage from "./pages/AboutPage";
import ShopPage from "./pages/ShopPage";
import BlogPage from "./pages/BlogPage";
import NotFoundPage from "./pages/NotFoundPage";

const router = createBrowserRouter([
  {
    element: <Default/>,
    children: [
      {
        path: "/",
        element: <MainPage />,
      },
      {
        path: "/about",
        element: <AboutPage />,
      },
      {
        path: "/shop",
        element: <ShopPage />,
      },
      {
        path: "/shop/:porductId",
        element: <ProductDetailPage />,
      },
      {
        path: "/blog",
        element: <BlogPage />,
      },
    ],
  },
  {
    path: "*",
    element: <NotFoundPage />,  // 404 페이지
  },
]);

export default function Router() {
  return <RouterProvider router={router} />;
}

 

🧩 `main.jsx`

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import Router from './routes/index.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Router />
  </StrictMode>
)

 

---

# 레이아웃 구현

-> 레이아웃은 여러 페이지에서 공통으로 사용되는 UI 요소(ex: header, footer)를 관리하는 방법

 

🧩 `components/Header.jsx` -- 헤더 컴포너트 생성

import React from "react";
import Shelly from "../assets/Shelly.svg";

const Header = () => {
  return (
    <header>
      <h1>
        <a href="/">
          <img src={Shelly} alt="로고" />
        </a>
      </h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
  )
};

export default Header;

 

🧩 `routes/layouts/Default.jsx` -- 레이아웃 컴포넌트 생성

import React from "react";
import { Outlet } from 'react-router-dom';
import Header from '../../components/Header';

const Default = () => {
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
};

export default Default;

 

 

 

 

 

 

 

 

 

 

---

🔍 회고