[ 67일차 2~3 ] 수업 정리 - React

✅ 주요 학습 목표

• 공통 레이아웃 컴포넌트(BasicLayout) 구현
• 공통 메뉴 컴포넌트(BasicMenu) 분리
• 중첩 라우팅(Nested Routing) 적용 및 Outlet 사용
• Todo 페이지 구성과 라우터 분리(todoRouter)

---

📌 학습 내용 정리

📁 1. 공통 레이아웃 컴포넌트: BasicLayout.jsx

• 화면 구조를 2열로 구성 (main, sidebar)
• 자식 페이지 컴포넌트를 {children}으로 삽입
• 전체 페이지에 적용되는 공통 틀

<BasicMenu />
<div className="...">
  <main>{children}</main>
  <aside>Sidebar</aside>
</div>

---

📁 2. 공통 메뉴 컴포넌트: BasicMenu.jsx

• React Router의 <Link>를 사용해 페이지 전환
• 로그인 버튼도 포함
• 전체 네비게이션 바 구성

<Link to="/">Main</Link>
<Link to="/about">About</Link>
<Link to="/todo">Todo</Link>

---

📁 3. Todo 인덱스 페이지: IndexPage.jsx

• BasicLayout을 사용해 메뉴와 본문을 감쌈
• 내부에 Outlet을 두어 하위 라우팅 컴포넌트 연결

<BasicLayout>
  <Outlet />
</BasicLayout>

---

📁 4. Todo 리스트 페이지: ListPage.jsx

• 간단한 Todo 리스트 소개 문구 출력 컴포넌트

---

📁 5. router/root.js 라우터 구성

• createBrowserRouter로 루트 라우터 생성
• 각 경로에 대해 lazy, Suspense로 동적 로딩 처리
• /todo 경로는 TodoIndex로 연결하며 중첩 라우팅 적용

{
  path: "todo",
  element: <Suspense fallback={Loading}><TodoIndex /></Suspense>,
  children: todoRouter()
}

---

📁 6. router/todoRouter.js - 하위 라우터 정의

• 기본 경로에서는 list로 리다이렉트
• /todo/list에서 TodoList 컴포넌트 로드

[
  { path: "", element: <Navigate replace to="list" /> },
  { path: "list", element: <Suspense fallback={Loading}><TodoList /></Suspense> }
]

---

💡 포인트 정리

•  BasicLayout으로 페이지 레이아웃 통일
•  BasicMenu는 네비게이션 역할 (메인, 어바웃, 투두로 이동)
•  Outlet을 통해 중첩 라우팅 적용
•  라우팅 코드를 root.js와 todoRouter.js로 분리 구성하여 유지보수 편리
•  Navigate를 통해 경로 접근 시 자동 리디렉션 처리 가능

---

📌 정리하자면, React 프로젝트 구조를 체계적으로 구성하는 방법을 익혔습니다. BasicLayout과 BasicMenu를 통해 재사용 가능한 레이아웃과 메뉴를 구축하고, Outlet을 활용한 중첩 라우팅 구조를 구현했습니다. 또한 라우터를 파일 단위로 분리하면서 확장성과 유지보수성을 높였습니다.