OuterLayout 지양 근거

function OuterLayout({ children }) {
  return (
    <div>
      <Header />
      <Sidebar />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

function HomePage() {
  return (
    <OuterLayout>
      <h1>Home Page Content</h1>
    </OuterLayout>
  );
}

function AboutPage() {
  return (
    <OuterLayout>
      <h1>About Page Content</h1>
    </OuterLayout>
  );
}

// Header, Sidebar, Footer가 모든 페이지에서 항상 렌더링

function OuterLayout({ children, showSidebar }) {
  return (
    <div>
      <Header />
      {showSidebar && <Sidebar />}
      <main>{children}</main>
      <Footer />
    </div>
  );
}

function HomePage() {
  return (
    <OuterLayout showSidebar={true}>
      <h1>Home Page Content</h1>
    </OuterLayout>
  );
}

function AboutPage() {
  return (
    <OuterLayout showSidebar={false}>
      <h1>About Page Content</h1>
    </OuterLayout>
  );
}

// Sidebar는 HomePage에서는 렌더링되지만, AboutPage에서는 렌더링되지 않음

라우팅 제어의 어려움:
<Router>를 OuterLayout 내부에 두면, 모든 페이지가 동일한 라우팅 구조를 강제적으로 사용해야 할 수 있습니다. 이는 각 페이지별로 다른 라우팅이 필요할 때 유연한 구성을 방해합니다.

 

라우터의 중복 및 성능 저하:
하나의 애플리케이션 내에 여러 라우터를 중첩하거나 중복해서 사용하는 것은 리액트의 라우터 시스템에서 비효율적인 패턴입니다. 이는 불필요한 라우팅 계산 및 성능 저하를 초래할 수 있습니다.

 

상태 및 링크 관리의 어려움:
<Router>의 내부에 위치한 컴포넌트는 라우팅 관련 상태와 링크에 의존하기 때문에, OuterLayout이 모든 페이지에 동일하게 적용된다면 일부 페이지에서 라우팅 관련 로직이 불필요하게 복잡해질 수 있습니다.

 

전역 스타일 및 상태 관리 어려움:
<Router> 밖에서 스타일이나 상태를 관리하게 되는 경우, 각 페이지의 특성에 적합한 스타일링 또는 상태 전파가 어려울 수 있습니다.