[React] Layout 설계 outlet 사용

블로그 프로젝트를 하면서 React를 다시 천천히 공부해본다.
먼저 Layout설계를 할때 따로 Rayout 컴포넌트를 만들지 않았는데
이번 기회에 만들어보고 여러 페이지에 공통으로 존재하는 부분들을
Layout으로 관리하였다.

프로젝트를 위한 Layout 세팅을 하였다. Router 컴포넌트를 따로 만들어도 되지만 그냥 App.tsx에 라우팅을 진행하였다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Layout from "./Layout/Layout";
import PostWrite from "./pages/PostWrite";
import PostList from "./components/PostLIst";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />} >
          <Route index element={<PostList/>}/>
          <Route path="/write" element={<PostWrite/>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Layout 컴포넌트

import { Outlet } from "react-router-dom";
import CategorySection from "../components/CategorySection";
import SideBar from "../components/Sidebar";

function Layout() {
  return (
    <div className="flex">
      <SideBar />
      <div className="flex-1 flex-col ">
        <CategorySection />
        <main>
          <Outlet/>
        </main>
      </div>
    </div>
  );
}

export default Layout;

역할

공통 레이아웃 관리 → 모든 페이지에서 유지되는 요소를 포함
페이지 전환 시 변경되지 않는 요소 → Sidebar, CategorySection
각 페이지가 렌더링될 공간 제공 → 사용

Outlet

react-router-dom의 중첩 라우트 기능을 활용
부모 라우트에서 공통 레이아웃을 제공하고,
자식 라우트가 위치에 렌더링됨