리액트 라우터 1 : 셋팅이랑 기본 라우팅 🚀

오늘의 숙제 📝

/detail로 접속하면 보여줄 상세페이지를 컴포넌트를 이용해서 만들어오십시오.
중요: 컴포넌트용 파일은 .js 말고 .jsx 확장자로 지어야 Vite 환경에서 잘됩니다! ⚠️

React에서 페이지를 나누는 방법 📄

일반 웹사이트 vs React

• 일반 HTML 사이트: HTML 파일 여러 개 = 여러 페이지
• React: HTML 파일 하나만 사용, <div> 내용을 갈아치워서 페이지 전환

React에서는 직접 코드 짜기 귀찮으니 react-router-dom 라이브러리를 사용하는 것이 일반적입니다! 💡

react-router-dom 설치 및 셋팅 🔧

1단계: 라이브러리 설치

터미널에서 다음 명령어 입력:

npm install react-router-dom@6

2단계: 기본 셋팅

index.js (또는 main.jsx) 파일 수정:

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

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

셋팅 완료! 📦
1. BrowserRouter import하기
2. <BrowserRouter>로 <App/> 감싸기

라우터로 페이지 나누는 법 🔀

기본 사용법

웹사이트 URL 경로마다 다른 페이지를 보여주고 싶을 때:

// App.js
import { Routes, Route, Link } from 'react-router-dom'

function App(){
  return (
    // 생략
    <Routes>
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

작성 순서 📋

1. 상단에서 Routes, Route, Link 컴포넌트 import
2. <Routes> 만들고 그 안에 <Route> 작성
3. <Route path="/url경로" element={ <보여줄html> } /> 형태로 작성

메인페이지 설정

<Route path="/" element={ <div>메인페이지에서 보여줄거</div> } />

path="/"는 메인페이지를 의미합니다! 🏠

메인페이지에만 상품목록 표시하기

<Route path="/" element={ 
  <>
    <div className="main-bg"></div>
    <div className="container">
      <div className="row">
        {shoes.map((a, i) => {
          return <Card shoes={shoes[i]} i={i}></Card>
        })}
      </div>
    </div> 
  </>
} />

결과:

• 메인페이지(/) 접속 시에만 상품목록 표시
• /detail, /about 페이지에서는 상품목록 숨김

페이지 이동 버튼 만들기 🔗

Link 컴포넌트 사용법

유저들은 주소창 입력이 아닌 링크를 통해 페이지를 이동합니다:

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

특징:

• <Link to="경로">텍스트</Link> 형태
• 클릭하면 해당 URL 경로로 이동
• 페이지 새로고침 없이 부드러운 전환

---

보충 설명 💡

SPA (Single Page Application) 개념 🌐

기존 방식 (MPA - Multi Page Application):

페이지 이동 → 서버 요청 → 새 HTML 받기 → 전체 페이지 새로고침

React 방식 (SPA):

페이지 이동 → JS로 컴포넌트 교체 → 빠른 화면 전환

SPA의 장점:

• 빠른 페이지 전환 (새로고침 없음)
• 부드러운 사용자 경험
• 서버 부하 감소

라우터 종류와 차이점 🔍

1. BrowserRouter vs HashRouter

// BrowserRouter (권장)
// URL: https://mysite.com/about
<BrowserRouter>
  <App />
</BrowserRouter>

// HashRouter  
// URL: https://mysite.com/#/about
<HashRouter>
  <App />
</HashRouter>

2. 서버 설정 고려사항

• BrowserRouter: 서버에서 모든 경로를 index.html로 리다이렉트 설정 필요
• HashRouter: 서버 설정 불필요, 하지만 SEO에 불리

고급 라우팅 패턴 🎯

1. 중첩 라우트 (Nested Routes)

<Routes>
  <Route path="/shop" element={<ShopLayout />}>
    <Route path="products" element={<Products />} />
    <Route path="categories" element={<Categories />} />
  </Route>
</Routes>

2. 동적 라우트 (Dynamic Routes)

<Routes>
  <Route path="/product/:id" element={<ProductDetail />} />
  <Route path="/user/:userId/posts/:postId" element={<PostDetail />} />
</Routes>

3. 조건부 라우팅

function ProtectedRoute({ children }) {
  const isAuthenticated = useAuth();
  return isAuthenticated ? children : <Navigate to="/login" />;
}

<Route path="/dashboard" element={
  <ProtectedRoute>
    <Dashboard />
  </ProtectedRoute>
} />

라우터 훅 활용 🪝

1. useNavigate - 프로그래밍적 네비게이션

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

function MyComponent() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    // 조건에 따른 페이지 이동
    if (isLoggedIn) {
      navigate('/dashboard');
    } else {
      navigate('/login');
    }
  };
}

2. useLocation - 현재 위치 정보

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

function MyComponent() {
  const location = useLocation();
  
  // 현재 경로에 따른 조건부 렌더링
  const isHomePage = location.pathname === '/';
}

3. useParams - URL 파라미터 접근

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

function ProductDetail() {
  const { id } = useParams();
  
  // /product/123 접속 시 id = "123"
}

성능 최적화 ⚡

1. 코드 스플리팅 (Code Splitting)

import { lazy, Suspense } from 'react';

const About = lazy(() => import('./components/About'));
const Contact = lazy(() => import('./components/Contact'));

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={
        <Suspense fallback={<div>로딩 중...</div>}>
          <About />
        </Suspense>
      } />
    </Routes>
  );
}

2. 라우트 기반 스플리팅

// 각 페이지를 별도 청크로 분리
const routes = [
  {
    path: '/products',
    component: lazy(() => import('./pages/Products'))
  },
  {
    path: '/orders', 
    component: lazy(() => import('./pages/Orders'))
  }
];