[React] 공통 헤더(Header)와 푸터(Footer) 만들기

my_react_app.zip

0.17MB

 

✅ 목표

React TypeScript 프로젝트에서 모든 페이지에 공통으로 보이는 헤더와 푸터를 만들어서 적용해보자.

 

1️⃣ Header 컴포넌트 만들기

src/components/Header.tsx 파일을 새로 만들어주세요.

// src/components/Header.tsx
import React from "react";
import "./Header.css";

const Header: React.FC = () => {
  return (
    <header className="header">
      <h1>🌟 나의 멋진 리액트 앱</h1>
      <nav>
        <a href="/">홈</a>
        <a href="/about">소개</a>
        <a href="/contact">문의</a>
      </nav>
    </header>
  );
};

export default Header;

 

✨ 헤더 스타일도 추가해볼까?

src/components/Header.css 파일도 같이 만들어줘.

/* src/components/Header.css */
.header {
  background-color: #282c34;
  padding: 20px;
  color: white;
  text-align: center;
}

.header nav a {
  color: #61dafb;
  margin: 0 10px;
  text-decoration: none;
}

 

2️⃣ Footer 컴포넌트 만들기

src/components/Footer.tsx 파일을 새로 만들자.

// src/components/Footer.tsx
import React from "react";
import "./Footer.css";

const Footer: React.FC = () => {
  return (
    <footer className="footer">
      <p>© 2025 나의 리액트 앱. All rights reserved.</p>
    </footer>
  );
};

export default Footer;

그리고 src/components/Footer.css 파일도!

/* src/components/Footer.css */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: #555;
}

 

3️⃣ App.tsx에서 공통 컴포넌트로 연결하기

src/App.tsx 파일을 열고, Header와 Footer를 넣어보자.

// src/App.tsx
import React from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Header />

      <main>
        <h2>여기는 본문 내용이 들어갈 부분이에요!</h2>
        <p>리액트와 타입스크립트를 배워보아요 🎉</p>
      </main>

      <Footer />
    </div>
  );
}

export default App;

 

 

🧪 잘 되었는지 확인!

이제 npm start 또는 yarn start로 프로젝트를 실행해보면,
상단엔 헤더가, 하단엔 푸터가 나올 거야.