🚦 React Router

---

✅ 1. React Router란?

• React Router는 React에서 SPA(Single Page Application) 환경에서 페이지 전환을 구현할 수 있게 해주는 대표적인 라우팅 라이브러리
• URL 경로에 따라 서로 다른 컴포넌트를 렌더링함

---

✅ 2. 설치 방법

npm install react-router-dom

---

✅ 3. 주요 컴포넌트 & 훅

컴포넌트/훅	설명
BrowserRouter	라우팅을 위한 최상위 컴포넌트 (HTML5 history API 사용)
Routes	여러 Route를 그룹화하는 컴포넌트
Route	특정 경로와 컴포넌트를 매핑
Link	페이지 전환을 위한 컴포넌트 (a 태그 대체, 새로고침 없음)
useNavigate	함수형 컴포넌트에서 프로그래밍 방식으로 페이지 이동
useParams	URL의 path variable(경로 매개변수) 값 추출
useSearchParams	URL의 query string 값 추출

---

✅ 4. 예제 코드 및 설명

📌 1) 메인 페이지 컴포넌트

function Home(props) {
    return <>메인페이지</>;
}

📌 2) 소개 페이지 컴포넌트

function About(props) {
    return <>소개 페이지</>;
}

📌 3) 마이페이지 (QueryString 사용)

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

function MyPage(props) {
    const [searchParams] = useSearchParams();
    const name = searchParams.get('name');
    const age = searchParams.get('age');

    return (
        <>
            <div>마이페이지
                <p>이름 : {name}</p>
                <p>나이 : {age}</p>
            </div>
        </>
    );
}

📌 4) 제품 소개 페이지 (Path Variable 사용)

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

function Product(props) {
    // URL 예시: /product/코카콜라/1000
    const { name, price } = useParams();

    return (
        <>
            <div>제품 소개 페이지
                <p>제품명 : {name}</p>
                <p>가격 : {price}</p>
            </div>
        </>
    );
}

📌 5) 404 페이지 및 페이지 이동

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

function Page404(props) {
    const navigate = useNavigate();

    const moveToHome = () => {
        navigate("/");
    };

    return (
        <>
            <div>404 존재하지 않는 페이지입니다.</div>
            <Link to="/">홈으로</Link>
            <button onClick={moveToHome}>홈으로</button>
        </>
    );
}

---

✅ 5. 라우터 전체 구조 예시

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

export default function AppRouter(props) {
    return (
        <>
            <BrowserRouter>
                <ul>
                    {/* HTML 방식: 새로고침 발생 */}
                    <a hrefhome / html 방식)</a>

                    {/* 라우터 방식: 새로고침 없이 이동 */}
                    <Link to="/">메인페이지(home / 라우터 방식)</Link>
                    <Link to="/about">소개페이지</Link>
                    <Link to="/mypage">마이페이지</Link>
                    <Link to="/mypage?name=배두훈&age=40">마이페이지(쿼리)</Link>
                    {/* path variable 사용 시, 모든 매개변수 값 필요 */}
                    <Link to="/proudct/코카콜라/1000">제품소개</Link>
                </ul>

                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                    <Route path="/mypage" element={<MyPage />} />
                    {/* path variable은 /:변수명 형태로 선언 */}
                    <Route path="/proudct/:name/:price" element={<Product />} />
                    {/* 정의되지 않은 경로는 404 페이지로 */}
                    <Route path="*" element={<Page404 />} />
                </Routes>
            </BrowserRouter>
        </>
    );
}

---

✅ 6. 주요 사용 패턴 요약

• Link: <Link to="/경로">텍스트</Link>
  → 새로고침 없이 페이지 이동
• useNavigate:
  → 함수 내에서 navigate("/경로")로 페이지 이동
• useParams:
  → URL 경로 변수 추출 (예: /product/:name/:price)
• useSearchParams:
  → URL 쿼리스트링 값 추출 (예: /mypage?name=홍길동&age=30)

---