공통 Layout 컴포넌트 - Header, Footer, Layout

 
Tailwind 설치를 마치고 적용 완료가 되었으니 공통 레이아웃 컴포넌트를 만들어 전체 페이지 구조를 통일 시키는 작업이 필요하다.
크게 Header와 Footer로 구분하고 전체 Layout 구조를 잡는다.
 
 

| 폴더 구조

components 디렉터리 안에 Layout.js, Header.js, Footer.js 파일을 생성한다.

frontend/
└── src/
    ├── components/
    │   ├── Layout.js
    │   ├── Header.js
    │   └── Footer.js
    └── pages/
        └── HomePage.js

 
 
 

| Header

네비게이션이나 로고 등을 위치시켜 모든 페이지에 공통으로 보여질 수 있는 구조를 컴포넌트로 만든다.
 
frontend/src/components/Header.js

export default function Header() {
  return (
    <header className="bg-blue-600 text-white p-4">
      <div className="container mx-auto text-xl font-bold">My Project</div>
    </header>
  );
}

 
 

| Footer

하단에 공통으로 들어가는 정보를 담을 수 있는 컴포넌트를 만든다.
 
frontend/src/components/Footer.js

export default function Footer() {
  return (
    <footer className="bg-gray-100 text-center text-sm text-gray-600 py-4">
      © 2025 My Project. All rights reserved.
    </footer>
  );
}

 
 

| Layout

공통적인 전체 구조를 잡아주는 컴포넌트를 만든다.
위에서 만든 헤더와 푸터를 불러오고 중간에 main부분에 각 페이지들이 불려올 수 있게 {children}를 해준다. 이는 컴포넌트 태그 안에 들어오는 요소를 의미한다. 부모 컴포넌트가 자식 컴포넌트를 감쌀 때 렌더링되는 내용이 된다. 이렇게 하면 가운데 콘텐츠만 바뀌게 만들 수 있다.
 
frontend/src/components/Layout.js

import Header from "./Header";
import Footer from "./Footer";

export default function Layout({ children }) {
  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <main className="flex-1 container mx-auto p-4">{children}</main>
      <Footer />
    </div>
  );
}

 
 

| 적용하기

 
적용할 페이지에 impot하고 return () 안에 <div>로 감쌌던 부분에 Layout으로 바꾸면 적용된다.

import Layout from "../components/Layout";

export default function HomePage() {
  return (
    <Layout>
      ...
    </Layout>
  );
}

 
 
이렇게 헤더와 푸터가 있고 안에 콘텐츠가 바뀔 수 있는 레이아웃 구조가 완성되었다.