Outlet을 활용한 공통 레이아웃 관리 ‐ 2024.11.11

문제 상황

새로운 페이지(StocksDetail)를 만들려고 하다보니 Header 역시 동일하게 필요했다.

다음과 같은 형태로 컴포넌트가 구성되었다.

function App() {
  return (
    <Router>
      <Routes>
        <Route index element={<Home />} />
        <Route path='stocks/:id' element={<StocksDetail />} />
      </Routes>
    </Router>
  );
}

export default function Home() {
  return (
    <>
      <Header />
      <div className='flex flex-col gap-4 pt-[60px]'>
        <StockIndex />
        <TopFive />
      </div>
      <Login />
    </>
  );
}

export default function StocksDetail() {
  return (
    <>
      <Header />
      <div className='flex flex-col gap-4 pt-[60px]'>
        // stocksdetail...
      </div>
      <Login />
    </>
  );
}

Home하고 StocksDetail에 중복되는 컴포넌트들이 보인다. Header와 Login !

지금은 두 개의 페이지라 괜찮을 지 몰라도 페이지가 점점 늘어나다 보면 이 동일한 작업을 계속 해줘야 하는데 너무 비효율적이라 생가했다. 공통 컴포넌트는 하나의 공통 레이아웃으로 분리할 수 없을까??

문제 해결

react-router-dom에 Outlet을 사용하면 해결할 수 있다.

부모 컴포넌트에 Outlet을 정의하고,

그 부모 컴포넌트를 가지는 상위 route의 자식 route들의 컴포넌트가 Outlet 자리에 렌더링 된다.

아래 코드를 보면 Layout이 부모(상위 컴포넌트)이고, Home, StocksDetail이 하위(자식 컴포넌트)이다.

부모 Layout 을 기반으로 Outlet 위치에 Home과 StokcsDetail이 route 경로에 따라 그려진다!

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index element={<Home />} />
          <Route path='stocks/:id' element={<StocksDetail />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

function Layout() {
  return (
    <>
      <Header />
      <main className='mt-[60px] flex flex-col gap-4'>
        <Outlet />
      </main>
      <Login />
    </>
  );
}

export default function Home() {
  return (
    <>
      <StockIndex />
      <TopFive />
    </>
  );
}

export default function StocksDetail() {
  return <>// stocksdetail...</>;
}

Outlet을 활용해 중복 레이아웃을 제거해 유지보수에 유리한 코드를 작성할 수 있었다!

Ref

https://hsly22xk.tistory.com/405
https://reactrouter.com/en/main/components/outlet