20.React Dynamic Routing: 동적 경로 매칭과 렌더링의 모든 것

"React Dynamic Routing: 동적 경로 매칭과 렌더링의 모든 것"

---

1시간 분량 강의안 (Dynamic Routing 기초)

강의 목표

1. 동적 라우팅의 개념과 필요성을 이해한다.
2. React Router에서 동적 라우팅을 구현하는 방법을 학습한다.
3. 동적 라우팅을 활용하여 URL 기반 데이터 렌더링을 실습한다.

---

강의 목차

---

1. 동적 라우팅이란 무엇인가? (10분)

동적 라우팅의 정의

• 동적 라우팅은 URL의 특정 부분을 동적으로 변화시키며, 해당 경로에 맞는 데이터를 렌더링하는 라우팅 방식입니다.
• URL 파라미터를 통해 데이터를 전달하거나, 컴포넌트의 렌더링을 변경할 수 있습니다.

React에서 동적 라우팅의 필요성

1. 유연한 데이터 렌더링: 사용자가 방문하는 경로에 따라 데이터를 동적으로 렌더링.
2. URL 기반 상태 관리: URL 파라미터를 활용해 애플리케이션 상태를 직관적으로 유지.
3. SEO 향상: 고유 경로에 맞는 콘텐츠를 제공하여 검색 엔진 최적화.

---

2. 동적 라우팅 설정 및 사용 (10분)

1단계: React Router 설치

• React Router 설치:

npm install react-router-dom

2단계: 동적 경로 정의

• React Router에서 :parameter를 사용해 동적 경로 설정:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

---

3. 동적 라우팅의 주요 기능 (20분)

1단계: URL 파라미터 접근

• useParams Hook을 사용하여 URL 파라미터 접근:
   

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <p>User ID: {id}</p>;
}

export default User;

2단계: 파라미터 기반 데이터 렌더링

• 파라미터에 따라 데이터를 가져와 렌더링:
   

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then((response) => response.json())
      .then((data) => setUserData(data));
  }, [id]);

  if (!userData) return <p>Loading...</p>;

  return (
    <div>
      <h1>{userData.name}</h1>
      <p>Email: {userData.email}</p>
    </div>
  );
}

export default User;

3단계: Query Parameters

• URL에 쿼리 파라미터를 추가하고 사용하는 방법:

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

function Products() {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const category = query.get('category');

  return <p>Category: {category}</p>;
}

---

4. 동적 라우팅의 고급 사용법 (10분)

1단계: 다중 파라미터

• URL에서 여러 파라미터를 사용하는 방법:
   

<Route path="/product/:category/:id" element={<Product />} />

function Product() {
  const { category, id } = useParams();
  return (
    <p>
      Category: {category}, Product ID: {id}
    </p>
  );
}

2단계: Optional Parameters

• 선택적 파라미터 사용:

<Route path="/product/:id?" element={<Product />} />

function Product() {
  const { id } = useParams();
  return <p>{id ? `Product ID: ${id}` : 'No Product Selected'}</p>;
}

3단계: Catch-All Routes

• 경로가 일치하지 않을 경우 모든 경로를 처리:

<Route path="*" element={<NotFound />} />

function NotFound() {
  return <p>Page not found</p>;
}

---

5. 실습 과제 (10분)

실습 과제

1. 사용자 프로필 페이지를 동적 라우팅으로 구현하세요:
   • 경로: /profile/:username
   • 해당 사용자의 정보를 API에서 가져와 렌더링.
2. 상품 페이지를 구현하세요:
   • 경로: /product/:category/:id
   • 카테고리와 상품 ID에 따라 다른 데이터를 표시.
3. 쿼리 파라미터를 사용하여 필터 옵션을 추가하세요:
   • 경로: /products?filter=popular

 

실습(결과)

 

아래는 React Router를 사용하여 사용자 프로필, 상품 페이지, 그리고 쿼리 파라미터를 이용한 필터 옵션을 구현하는 상세 가이드입니다.

---

1. 프로젝트 생성 및 기본 설정

1. React 프로젝트 생성

   npx create-react-app react-router-demo
   cd react-router-demo

2. React Router 설치

   npm install react-router-dom

---

2. 폴더 및 파일 구조 설정

아래와 같은 폴더 구조를 준비합니다:

src/
├── components/
│   ├── Navbar.js
│
├── pages/
│   ├── Profile.js
│   ├── Product.js
│   ├── Products.js
│
└── App.js
└── index.js

---

3. 단계별 코드 작성

3.1. 네비게이션 바 추가

src/components/Navbar.js

src/
├── components/
│   ├── Navbar.js
│
├── pages/
│   ├── Profile.js
│   ├── Product.js
│   ├── Products.js
│
└── App.js
└── index.js

---

3.2. 사용자 프로필 페이지 구현

src/pages/Profile.js

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function Profile() {
  const { username } = useParams(); // 동적 파라미터 받기
  const [user, setUser] = useState(null);

  // 사용자 데이터 가져오기
  useEffect(() => {
    async function fetchUser() {
      const response = await fetch(`https://jsonplaceholder.typicode.com/users?username=${username}`);
      const data = await response.json();
      setUser(data[0]);
    }
    fetchUser();
  }, [username]);

  if (!user) {
    return <p>Loading user data...</p>;
  }

  return (
    <div>
      <h1>{user.name}'s Profile</h1>
      <p>Username: {user.username}</p>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
}

export default Profile;

---

3.3. 상품 페이지 구현

src/pages/Product.js

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

function Product() {
  const { category, id } = useParams(); // 카테고리와 상품 ID 동적 파라미터 받기

  return (
    <div>
      <h1>Product Details</h1>
      <p>Category: {category}</p>
      <p>Product ID: {id}</p>
      <p>More details about the product...</p>
    </div>
  );
}

export default Product;

---

3.4. 쿼리 파라미터로 필터 옵션 구현

src/pages/Products.js

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

function Products() {
  const [searchParams] = useSearchParams();
  const filter = searchParams.get('filter'); // 쿼리 파라미터 가져오기

  return (
    <div>
      <h1>Products</h1>
      <p>Filter: {filter || 'None'}</p>
      <ul>
        {filter === 'popular' ? (
          <li>Popular Product 1</li>
        ) : (
          <li>All Products</li>
        )}
      </ul>
    </div>
  );
}

export default Products;

---

3.5. 라우팅 설정

src/App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Profile from './pages/Profile';
import Product from './pages/Product';
import Products from './pages/Products';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<h1>Welcome to the App</h1>} />
        <Route path="/profile/:username" element={<Profile />} />
        <Route path="/product/:category/:id" element={<Product />} />
        <Route path="/products" element={<Products />} />
      </Routes>
    </Router>
  );
}

export default App;

---

3.6. 엔트리 포인트 설정

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

---

4. 실행 및 테스트

1. 애플리케이션 실행
2. bash
   코드 복사
   npm start
3. 테스트 경로
   • http://localhost:3000/: 홈 페이지 확인
   • http://localhost:3000/profile/johndoe: 사용자 프로필 페이지 (johndoe의 정보 표시)
   • http://localhost:3000/product/electronics/1: 전자 카테고리의 ID 1 상품 정보 표시
   • http://localhost:3000/products?filter=popular: 필터로 인기 제품 확인

---

5. 동작 요약

1. 사용자 프로필 페이지
   • URL의 :username 동적 파라미터를 기반으로 사용자 정보를 API에서 가져와 렌더링.
2. 상품 페이지
   • URL의 :category와 :id를 기반으로 동적 상품 정보 표시.
3. 필터링 기능
   • ?filter=popular와 같은 쿼리 파라미터를 사용하여 조건부로 다른 데이터를 표시.

---

6. Q&A 및 정리 (10분)

• Q&A:
  1. 동적 라우팅은 어떤 상황에서 가장 유용한가요?
  2. React Router의 동적 라우팅과 Next.js의 동적 경로의 차이점은 무엇인가요?
• 요약:
  • 동적 라우팅은 React 애플리케이션에서 유연한 데이터 렌더링과 URL 기반 상태 관리를 가능하게 합니다.
  • useParams와 useLocation을 사용해 URL 파라미터와 쿼리 데이터를 쉽게 활용할 수 있습니다.
  • 고급 기능으로 다중 파라미터, 선택적 파라미터, Catch-All Routes를 지원합니다.