Routing??

1. 라우팅이란?

라우팅(Routing)은 사용자가 어떤 URL로 접근했을 때, 어떤 화면(UI 컴포넌트) 을 보여줄지를 결정하는 것.

• 기존 웹: 서버가 URL마다 HTML 파일을 내려줌 (SSR, 서버 중심)
• SPA (Single Page Application): 한 개의 HTML + 자바스크립트로 동작 → 클라이언트에서 URL 처리 필요 → React Router 등장!

---

2. 라우팅 처리 방식

방식	설명	장점	단점
조건문 방식	if문이나 switch문으로 location.pathname을 분석해 직접 컴포넌트 렌더링	간단한 예제에 적합	규모가 커지면 복잡도 증가, 유지보수 어려움
React Router 방식	공식 라이브러리 react-router-dom 사용	선언적, 가독성, 유지보수, 기능 다양	학습 필요, 세팅 필요

✅ React Router 방식이 실무에서 거의 표준입니다.

---

3. React Router 기본 개념

npm install react-router-dom

3-1. 주요 컴포넌트

컴포넌트	역할
<BrowserRouter>	라우팅 컨텍스트 제공 (앱 전체를 감쌈)
<Routes>	여러 개의 라우트 정의
<Route>	URL 경로별 컴포넌트 매핑
<Link>	페이지 이동 링크 (a태그 대체)
useNavigate()	자바스크립트로 페이지 이동
useParams()	URL 파라미터 추출

---

4. 라우팅 모드 패러다임 비교

모드	개념	React 라우팅 적용
선언적 모드	원하는 결과를 선언하고 프레임워크가 처리하게 함 (ex: <Route path="/" element={<Home />} />)	✅ React Router는 선언적 방식
데이터 모드	URL에 따라 어떤 데이터를 불러와 어떤 컴포넌트를 렌더링할지 결정 (loader 등)	✅ v6.4+에서 지원 (데이터 페칭 내장)
프레임워크 모드	Next.js처럼 파일 기반, 자동 라우팅 처리	❌ React Router는 수동 설정 필요 (단점)

---

5. 사용자 / 관리자 권한 분기 처리

// AuthContext.jsx
import { createContext, useContext, useState } from "react";

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null); // { uid, role: 'user' | 'admin' }

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

🔐 PrivateRoute

// PrivateRoute.jsx
import { Navigate } from 'react-router-dom';
import { useAuth } from './AuthContext';

const PrivateRoute = ({ children, requiredRole }) => {
  const { user } = useAuth();

  if (!user) return <Navigate to="/login" replace />;
  if (requiredRole && user.role !== requiredRole) return <Navigate to="/unauthorized" replace />;

  return children;
};

export default PrivateRoute;

적용 예시

// App.jsx
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';

<BrowserRouter>
  <AuthProvider>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/dashboard" element={
        <PrivateRoute>
          <Dashboard />
        </PrivateRoute>
      } />
      <Route path="/admin" element={
        <PrivateRoute requiredRole="admin">
          <AdminPage />
        </PrivateRoute>
      } />
    </Routes>
  </AuthProvider>
</BrowserRouter>

---

6. 실습 예제 모음

예제 1: useNavigate()로 로그인 후 리다이렉트

// Login.jsx
import { useNavigate } from 'react-router-dom';

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

  const handleLogin = () => {
    // 로그인 성공 처리 후
    setUser({ uid: 'abc123', role: 'user' });
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>로그인</button>;
};

줄	설명
import { useNavigate } from "react-router-dom";	react-router-dom에서 useNavigate 훅을 불러옴. 페이지 이동을 위해 사용됨.
const navigate = useNavigate();	navigate 함수 생성. 이것으로 코드 내에서 특정 경로로 이동 가능하게 함. (프로그래밍적 라우팅)
const goToAbout = () => { navigate("/about"); };	버튼 클릭 시 "/about" 경로로 이동하게 만드는 함수 정의.
<button onClick={handleLogin}>	버튼을 클릭하면 handleLogin 함수 실행되며, 페이지가 이동함.

✅ 왜 필요한가?

• 사용자 인터랙션(버튼 클릭 등)을 통해 라우팅하고 싶을 때 필수.
• 링크 <Link>는 사용자가 직접 클릭해야만 작동하지만, useNavigate는 코드 흐름 안에서 이동 제어 가능.

예제 2: useParams()로 URL 파라미터 읽기

// PostDetail.jsx
import { useParams } from 'react-router-dom';

const PostDetail = () => {
  const { id } = useParams();
  return <div> 상품 ID: {id}</div>;
};

줄	설명
useParams()	현재 URL에 있는 파라미터 값을 가져오는 훅. 예: /product/123 → { id: "123" }
const { id } = useParams();	URL에서 :id 자리에 있는 값을 추출.
<p>상품 ID: {id}</p>	추출한 ID를 화면에 표시. 실제 데이터를 가져올 때도 이 ID를 사용 가능.

✅ 왜 필요한가?

• 상품 상세 페이지, 게시글 읽기 페이지처럼 URL에 따라 다른 데이터를 보여줄 때 필수.
• useParams는 동적 라우팅을 구현하는 핵심.

예제 3: 사용자/관리자 보호 라우트 구현 (PrivateRoute)

jsx
복사편집
import { Navigate } from "react-router-dom";

function PrivateRoute({ children, isAuthenticated, isAdminOnly }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" />; // 1️⃣
  }

  if (isAdminOnly && !isAuthenticated.isAdmin) {
    return <Navigate to="/not-authorized" />; // 2️⃣
  }

  return children; // 3️⃣
}

🔍 한 줄씩 해석

줄	설명
if (!isAuthenticated)	사용자가 로그인하지 않았으면 /login으로 강제 이동
Navigate to="/login"	라우터에서 페이지 리다이렉션 처리하는 컴포넌트.
if (isAdminOnly && !isAuthenticated.isAdmin)	관리자만 접근 가능한 경우, 사용자가 관리자가 아니라면 접근 차단
<Navigate to="/not-authorized" />	권한 없음 페이지로 이동 처리
return children;	위 조건을 모두 통과한 경우, 하위 컴포넌트를 렌더링 (정상 접근 허용)

✅ 왜 필요한가?

• *보안상 접근 제어가 필요한 페이지(예: 관리자 페이지)**에 필수.
• 로그인 여부 / 권한 유무에 따라 라우팅을 제어하는 핵심 기능.
• 실무에서 거의 모든 SPA 프로젝트에 포함됨.

---

✅ 요약 표: 각 기능별 목적과 필요성

기능	사용 목적	필요 이유
useNavigate()	버튼 클릭/로직 처리 후 라우팅	코드 내에서 라우팅을 유연하게 제어
useParams()	URL의 동적 파라미터 추출	상세 페이지 등 URL 기반 데이터 처리
PrivateRoute	사용자/관리자 접근 제어	인증 및 권한 기반 라우팅 보안 구현

---

7. 정리 요약

✨ 실무에서 조합 예시

<Route
  path="/admin"
  element={
    <PrivateRoute isAuthenticated={user} isAdminOnly={true}>
      <AdminPage />
    </PrivateRoute>
  }
/>

• /admin 경로에 접근 시, 로그인 여부 + 관리자 권한 확인.
• 조건에 맞으면 <AdminPage /> 렌더링.
• 아니면 /login 또는 /not-authorized로 리다이렉션.

---

📘 결론

위 코드는 전부 React에서 라우팅을 제대로 구현하기 위해 필수적인 구성 요소들

• useNavigate → 유저 액션 기반 이동
• useParams → URL 데이터 기반 컴포넌트 렌더링
• PrivateRoute → 권한에 따른 라우팅 제어

개념	설명
선언적 라우팅	<Route path="/" element={<Home />} /> 방식
권한 기반 분기	PrivateRoute로 사용자/관리자 구분
페이지 이동	useNavigate() 또는 <Link>
라우팅 모드	선언적 / 데이터 중심 / 프레임워크 기반 비교
실무 적용 팁	React Router v6 기준으로 설계, Context 활용 권장

---

✅ 마무리 팁

• 모든 컴포넌트는 Routes 안에서 선언적으로 구성할 것
• 권한 분기는 PrivateRoute로 깔끔하게 관리
• useNavigate, useParams 등 훅 적극 사용
• Context로 로그인 상태 전역 관리 → 라우팅 분기 유연하게
• Loader 등 데이터 중심 방식도 필요시 도입 (v6.4+)

필요하면 중첩 라우팅, 쿼리스트링, 라우트 코드 스플리팅도 이어서 학습 💪