리액트 라우터 : navigate, nested routes, outlet

react-router-dom에서 자주 사용되는 핵심 개념인 navigate, nested routes, outlet은 페이지 전환, 중첩된 페이지 구조, 자식 컴포넌트 출력 위치 지정을 다룰 때 사용됩니다. 아래에 각각 개념과 예시를 구분해 정리합니다.

---

1. navigate

개념

• useNavigate() 훅을 사용하여 프로그래밍적으로 경로를 이동할 수 있게 해주는 함수
• 버튼 클릭, 로그인 성공 등 이벤트 발생 시 코드로 이동 처리 가능

예시

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

function Login() {
  const navigate = useNavigate()

  const handleLogin = () => {
    // 로그인 처리 로직 후
    navigate('/todo') // /todo 경로로 이동
  }

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

---

2. nested routes (중첩 라우팅)

개념

• 상위 라우트 안에 **하위 라우트(서브 페이지)**를 포함시키는 구조
• 예: /settings/profile, /settings/account 같은 구조에서 settings가 부모이고, profile, account는 자식

예시 설정

// App.tsx
<Routes>
  <Route path="/" element={<Layout />}>
    <Route path="settings" element={<Settings />}>
      <Route path="profile" element={<Profile />} />
      <Route path="account" element={<Account />} />
    </Route>
  </Route>
</Routes>

---

3. outlet

개념

• 중첩 라우팅에서 자식 컴포넌트가 렌더링될 위치를 지정하는 역할
• 부모 컴포넌트에서 <Outlet />을 사용해 자식 라우트를 삽입함

예시

// Settings.tsx
import { Outlet, Link } from 'react-router-dom'

function Settings() {
  return (
    <div>
      <h2>설정 페이지</h2>
      <nav>
        <Link to="profile">프로필 설정</Link>
        <Link to="account">계정 설정</Link>
      </nav>
      <Outlet /> {/* 여기 자리에 자식 컴포넌트들이 렌더링됨 */}
    </div>
  )
}

---

4. 전체 구조 흐름

URL: /settings/profile
→ Settings.tsx에서 Outlet 위치에 Profile.tsx가 렌더링됨

• 부모: Settings.tsx
• 자식: Profile.tsx, Account.tsx
• <Outlet />이 자식의 출력을 담당함

---

요약

개념	설명	주요 사용 상황
navigate()	자바스크립트 코드로 페이지 이동	로그인 후 리디렉션, 버튼 클릭 시 이동
nested routes	상위/하위 라우트를 구성하는 방식	/settings/profile 같은 계층형 UI
outlet	자식 컴포넌트를 렌더링할 위치 지정	부모 컴포넌트 내부 레이아웃 지정 시

---

이 세 가지는 함께 자주 쓰이며, 특히 대시보드, 관리자 페이지, 마이페이지 등 복합적인 UI 구조에서 매우 중요합니다.