[감정 일기장] 공통 컴포넌트 관리 Header와 Button

공통 컴포넌트 관리: Header와 Button

 

프론트엔드 프로젝트를 진행하다 보면 여러 페이지에서 반복적으로 사용되는 요소들이 많다.

대표적으로 버튼이나 헤더 같은 UI 요소가 이에 해당한다.

이러한 컴포넌트를 개별적으로 관리하면 유지보수가 어렵고, 일관성이 떨어질 수 있다.

따라서 공통 컴포넌트로 만들어 관리하는 것이 중요하다.

이번 글에서는 Header와 Button 컴포넌트를 공통 컴포넌트로 설계하고, 이를 효율적으로 관리하는 방법을 정리한다.

---

1. Button 컴포넌트

버튼은 UI에서 가장 중요한 요소 중 하나다.

단순한 디자인이라도 클릭 이벤트를 처리하는 기능이 필수적으로 포함된다.

이번 프로젝트에서는 버튼을 긍정(Positive), 부정(Negative), 일반(Default) 세 가지 타입으로 분류하여 구현한다.

 

📌 Button 컴포넌트 구현

import "./Button.css";

const Button = ({ text, type = "DEFAULT", onClick }) => {
  return (
    <button
      onClick={onClick}
      className={`Button Button_${type}`}
    >
      {text}
    </button>
  );
};

export default Button;

컴포넌트는 text, type, onClick을 props로 받아 버튼의 스타일을 동적으로 변경할 수 있도록 설계했다. 기본 타입을 DEFAULT로 지정하여 props가 주어지지 않아도 정상 동작하도록 했다.

📌 Button 스타일링 (Button.css)

.Button {
  background-color: rgb(236, 236, 236);
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  white-space: nowrap;
}

.Button_POSITIVE {
  background-color: rgb(100, 201, 100);
  color: white;
}

.Button_NEGATIVE {
  background-color: rgb(253, 86, 95);
  color: white;
}

타입별로 className을 동적으로 부여하여 스타일을 다르게 적용했다. 기본 스타일은 회색, 긍정 버튼은 초록색, 부정 버튼은 빨간색으로 설정했다.

---

2. Header 컴포넌트

헤더는 페이지의 제목과 네비게이션 버튼을 포함하는 요소다. 이번 프로젝트에서는 헤더 좌측과 우측에 버튼을 배치할 수 있도록 유연하게 설계했다.

 

📌 Header 컴포넌트 구현

import "./Header.css";

const Header = ({ title, leftChild, rightChild }) => {
  return (
    <header className="Header">
      <div className="header_left">{leftChild}</div>
      <div className="header_center">{title}</div>
      <div className="header_right">{rightChild}</div>
    </header>
  );
};

export default Header;

이 컴포넌트는 title, leftChild, rightChild를 props로 받아 동적으로 요소를 배치할 수 있도록 설계했다.

leftChild와 rightChild에는 버튼이나 아이콘을 삽입할 수 있어 활용도가 높다.

📌 Header 스타일링 (Header.css)

.Header {
  display: flex;
  align-items: center;
  padding: 20px 0px;
  border-bottom: 1px solid rgba(226, 226, 226);
}

.Header > div {
  display: flex;
}

.Header .header_center {
  width: 50%;
  font-size: 25px;
  justify-content: center;
}

.Header .header_left {
  width: 25%;
  justify-content: flex-start;
}

.Header .header_right {
  width: 25%;
  justify-content: flex-end;
}

좌측과 우측 요소의 크기를 각각 25%로 설정하고, 가운데 title은 50%의 너비를 차지하도록 했다.

flexbox를 활용해 정렬을 깔끔하게 맞췄다.

---

3. 공통 컴포넌트 활용하기

공통 컴포넌트를 활용하면 코드의 재사용성을 극대화할 수 있다.

App.jsx에서 Header와 Button을 활용하여 다음과 같이 구성할 수 있다.

import './App.css';
import { Routes, Route, Link, useNavigate } from "react-router-dom"; 
import Home from './pages/Home';
import Diary from './pages/Diary';
import New from './pages/New';
import Notfound from './pages/Notfound';
import { getEmotionImage } from './util/get-emotion-image';
import Button from './components/Button';
import Header from './components/Header';

// 1. "/" : 모든 일기를 조회하는 Home 페이지
// 2. "/new" : 새로운 일기를 작성하는 New 페이지 
// 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지 
function App() {
  const nav = useNavigate();

  const onClickButton = () => {
    nav("/new");
  }

  return  (
    <> 
      <Header 
        title={"Header"}
        leftChild={<Button text={"Left"} />}
        rightChild={<Button text={"Right"} />}
      /> 
      <Button 
          text={"일반"}
          onClick={() => {
            console.log("123번 버튼 클릭!");
          }}
        />

      <Button 
          text={"긍정"}
          type={"POSITIVE"}
          onClick={() => {
            console.log("123번 버튼 클릭!");
          }}
      />

      <Button 
          text={"부정"}
          type={"NEGATIVE"}
          onClick={() => {
            console.log("123번 버튼 클릭!");
          }}
      />

      <Routes>
          <Route path="/" element={<Home />} /> 
          <Route path="/new" element={<New />} /> 
          <Route path="/diary/:id" element={<Diary />} /> 
          <Route path="*" element={<Notfound />} />
      </Routes>
    </>
  ); 
}

export default App

 

이처럼 Header와 Button 컴포넌트를 활용하면 재사용성이 높아지고, 유지보수가 쉬워진다.

---

마무리

공통 컴포넌트를 설계하면 프로젝트의 일관성을 유지하면서도 유지보수를 쉽게 할 수 있다.

이번 글에서는 Header와 Button 컴포넌트를 설계하고, props를 활용하여 재사용성을 높이는 방법을 정리했다.

앞으로 프로젝트를 진행할 때 공통 컴포넌트를 먼저 정의하고, 이를 재사용하는 방식으로 개발하면 더욱 효율적인 코드 작성이 가능할 것이다. 🚀