[🍎코딩애플 강의요약]navigate, nested routes, outlet 🧭

오늘의 숙제 📝

/event/one 페이지와 /event/two 페이지를 nested routes를 사용해서 만들어봅시다!

React 프로젝트 폴더 구조 📁

React는 HTML을 이쁘게 만들어주는 작은 라이브러리일 뿐입니다. 만들 파일들의 95%가 .js 파일이므로 비슷한 .js 파일끼리 묶어서 폴더를 구성하면 됩니다!

권장 폴더 구조

src/
├── components/     # 컴포넌트 역할하는 js 파일
├── routes/         # 페이지 역할하는 js 파일 (또는 pages/)
├── utils/          # 자주 쓰는 함수들
└── App.jsx

필요할 때마다 폴더를 추가로 만들어 사용하세요! 🔧

오늘 배울 것들 import하기 📦

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

1. useNavigate() - 페이지 이동 기능 🚀

Link 컴포넌트가 못생겼다면 useNavigate()를 사용해보세요!

function App(){
  let navigate = useNavigate()
  
  return (
    // 생략
    <button onClick={() => { navigate('/detail') }}>이동버튼</button>
  )
}

useNavigate() 사용법

• useNavigate(): 페이지 이동시켜주는 함수 반환
• navigate('/detail'): /detail 페이지로 이동
• navigate(-1): 뒤로 1번 가기
• navigate(2): 앞으로 2번 가기

숫자를 넣으면 브라우저 히스토리 기반 이동이 가능합니다! ⏮️⏭️

2. 404 페이지 만들기 ❌

유저가 존재하지 않는 경로로 접속했을 때 "없는 페이지입니다" 메시지를 보여주려면:

<Route path="*" element={ <div>없는페이지임</div> } />

작동 원리

• path="*": 모든 경로를 의미
• 위에서 정의한 경로들(/detail 등)이 아닌 이상한 페이지 접속 시 * 경로로 안내
• 맨 밑에 작성해야 함 (다른 라우트들 다음에)

3. Nested Routes - 서브경로 만들기 🗂️

사용 사례

• /about/member: 회사 멤버 소개 페이지
• /about/location: 회사 위치 소개 페이지

기본 방법

<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

Nested Routes 방법 (권장)

<Route path="/about" element={ <About/> }>  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

작동 원리

• <Route> 안에 <Route>를 넣는 것이 Nested routes
• /about/member 접속 시: <About> + <div>멤버들</div> 표시
• /about/location 접속 시: <About> + <div>회사위치</div> 표시

Outlet 컴포넌트 사용하기 📍

Nested routes에서 자식 element들을 어디에 보여줄지 지정하는 컴포넌트:

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

Outlet의 역할

• <Outlet>: nested routes 안의 element들이 표시될 위치
• /about/member 접속 시 <Outlet> 자리에 <div>멤버들</div> 표시
• 반드시 부모 컴포넌트에 Outlet을 배치해야 자식 요소가 보임!

라우터로 동적 UI 만들기 🎭

URL을 바꿀 때마다 다른 UI를 보여주는 것도 동적 UI를 만드는 방법 중 하나입니다!

라우터 사용의 장점

• 뒤로가기 버튼 사용 가능 ⬅️
• URL 공유 가능 🔗
• 브라우저 히스토리 관리 📚

---

보충 설명 💡

useNavigate vs Link 비교 🔄

Link 컴포넌트:

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

• 간단한 링크에 적합
• 접근성 좋음 (스크린 리더 등)
• SEO 친화적

useNavigate 훅:

const navigate = useNavigate();

const handleSubmit = (data) => {
  // 폼 제출 후 페이지 이동
  submitForm(data);
  navigate('/success');
};

• 조건부 네비게이션에 적합
• 프로그래밍적 제어 가능
• 이벤트 핸들러 안에서 사용

고급 useNavigate 사용법 🚀

1. replace 옵션

// 히스토리에 새 항목 추가 (기본값)
navigate('/login');

// 현재 히스토리 항목 교체 (뒤로가기 시 이전 페이지로 안 감)
navigate('/login', { replace: true });

2. state 전달

navigate('/profile', { 
  state: { 
    from: location.pathname,
    userInfo: userData 
  } 
});

// 목적지에서 state 받기
const location = useLocation();
const { from, userInfo } = location.state || {};

Nested Routes 실전 활용 🎯

1. 대시보드 레이아웃

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="analytics" element={<Analytics />} />
  <Route path="settings" element={<Settings />} />
  <Route path="profile" element={<Profile />} />
</Route>

function DashboardLayout() {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>
        <Outlet />
      </main>
    </div>
  );
}

2. index 라우트 활용

<Route path="/products" element={<ProductsLayout />}>
  <Route index element={<ProductsList />} />  {/* /products */}
  <Route path="new" element={<NewProduct />} />  {/* /products/new */}
  <Route path=":id" element={<ProductDetail />} />  {/* /products/123 */}
</Route>

라우트 보호하기 🛡️

1. 인증이 필요한 라우트

function ProtectedRoute({ children }) {
  const navigate = useNavigate();
  const { user } = useAuth();
  
  useEffect(() => {
    if (!user) {
      navigate('/login', { replace: true });
    }
  }, [user, navigate]);
  
  return user ? children : null;
}

<Route path="/admin" element={
  <ProtectedRoute>
    <AdminPanel />
  </ProtectedRoute>
} />

2. 권한 기반 라우팅

function RoleBasedRoute({ children, requiredRole }) {
  const { user } = useAuth();
  
  if (!user || user.role !== requiredRole) {
    return <Navigate to="/unauthorized" replace />;
  }
  
  return children;
}

에러 바운더리와 404 처리 ❌

1. 라우트별 에러 바운더리

<Route path="/dashboard" element={
  <ErrorBoundary fallback={<DashboardError />}>
    <Dashboard />
  </ErrorBoundary>
} />

2. 계층적 404 처리

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="products" element={<Products />} />
    <Route path="*" element={<NotFound />} />
  </Route>
</Routes>

성능 최적화 팁 ⚡

1. 라우트 기반 코드 스플리팅

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Profile = lazy(() => import('./pages/Profile'));

<Route path="/dashboard" element={
  <Suspense fallback={<LoadingSpinner />}>
    <Dashboard />
  </Suspense>
} />

2. 프리로딩

// 마우스 호버 시 컴포넌트 미리 로드
const DashboardLink = () => {
  const handleMouseEnter = () => {
    import('./pages/Dashboard'); // 프리로드
  };
  
  return (
    <Link to="/dashboard" onMouseEnter={handleMouseEnter}>
      대시보드
    </Link>
  );
};