Layout Components Pattern - 창우

• 공통되는 컴포넌트(헤더, 푸터 등)를 항상 페이지에 선언하는 것은 비효율적이고, 코드 중복이 발생한다.
• 따라서 리액트의 <합성> 속성을 이용해 레이아웃을 구성할 수 있다.
• 쉽게 생각하면 Layout.tsx 의 props로 {children} 영역에 들어가는 컴포넌트를 보여주는 것이라고 생각하면 된다.

전체 레이아웃과 특정 페이지의 레이아웃을 따로 구성할 수 있다. - 창우

Layout.tsx

import React from "react";

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  return (
    <div>
      {/* 헤더 */}
      <main>{children}</main>
      {/* 푸터 */}
    </div>
  );
};

export default Layout;

위와 같은 Layout.tsx 를 루트 디렉토리에 선언하면 전체 페이지에 적용된다.

src/페이지폴더/Layout.tsx 로 사용하면 특정 페이지에 대해서 레이아웃을 적용할 수 있다.