리액트 버튼 컴포넌트 만들기 – 재사용 가능한 UI 개발 방법

프론트엔드 개발을 하다 보면 버튼을 자주 사용하게 됩니다. 하지만 단순한 <button> 태그만으로는 다양한 디자인과 기능을 제공하기 어렵습니다.
특히 재사용 가능한 UI 컴포넌트를 만들려면 크기, 색상, 로딩 상태 등을 고려해야 합니다.

이번 글에서는 React 버튼 컴포넌트 만들기를 통해 재사용성을 높이는 방법을 배워보겠습니다.

---

1. 버튼 컴포넌트란?

버튼 컴포넌트는 여러 곳에서 공통으로 사용할 수 있도록 설계된 UI 요소입니다.
재사용 가능한 버튼을 만들 때 고려해야 할 요소는 다음과 같습니다.

✅ 크기 (Size) – 작은 버튼, 중간 버튼, 큰 버튼
✅ 색상 (Color) – 주요 색상(Primary), 경고 색상(Danger), 중립 색상(Neutral)
✅ 로딩 상태 (Loading) – 클릭 시 로딩 중임을 나타냄
✅ 클릭 이벤트 (onClick) – 버튼을 클릭했을 때 동작

위 조건을 만족하는 커스텀 버튼 컴포넌트를 React로 구현해보겠습니다.

---

2. React 버튼 컴포넌트 만들기

📌 프로젝트 설정

React 프로젝트가 없다면 create-react-app을 사용해 새 프로젝트를 생성합니다.

bash

복사편집

npx create-react-app my-button-app cd my-button-app npm start

이제 components/Button.js 파일을 생성하고, 버튼 컴포넌트를 작성합니다.

📌 버튼 컴포넌트 구현

jsx

복사편집

import React from "react"; const Button = ({ text, onClick, size = "medium", color = "blue", loading = false }) => { // 크기별 스타일 지정 const sizeClasses = { small: "px-2 py-1 text-sm", medium: "px-4 py-2 text-base", large: "px-6 py-3 text-lg", }; // 색상별 스타일 지정 const colorClasses = { blue: "bg-blue-500 text-white", red: "bg-red-500 text-white", gray: "bg-gray-500 text-white", }; return ( <button onClick={onClick} disabled={loading} className={`rounded ${sizeClasses[size]} ${colorClasses[color]} ${ loading ? "opacity-50 cursor-not-allowed" : "" }`} > {loading ? "로딩 중..." : text} </button> ); }; export default Button;

👉 주요 기능
✅ size 속성을 받아 버튼 크기를 조절할 수 있습니다.
✅ color 속성을 이용해 버튼 색상을 변경할 수 있습니다.
✅ loading 상태를 적용해 버튼 클릭 후 "로딩 중..."을 표시합니다.

---

3. 버튼 컴포넌트 테스트하기

이제 App.js에서 버튼을 불러와 테스트해보겠습니다.

jsx

복사편집

import React, { useState } from "react"; import Button from "./components/Button"; function App() { const [loading, setLoading] = useState(false); const handleClick = () => { setLoading(true); setTimeout(() => setLoading(false), 2000); }; return ( <div className="p-10"> <h1 className="text-2xl font-bold">React 버튼 컴포넌트</h1> <Button text="클릭하세요" onClick={handleClick} size="large" color="blue" loading={loading} /> </div> ); } export default App;

✅ 2초 동안 로딩 상태가 표시되는 버튼을 만들었습니다.
✅ 클릭 이벤트가 정상적으로 작동하는지 확인할 수 있습니다.

---

4. Tailwind CSS를 적용한 버튼 스타일링

Tailwind CSS를 적용하면 스타일링이 더욱 간편해집니다.
Tailwind를 설치하고 버튼에 추가 스타일을 적용해 보겠습니다.

📌 Tailwind 설치

bash

복사편집

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init

📌 tailwind.config.js에서 content를 수정해 React 파일들을 감지하도록 설정합니다.

js

복사편집

module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], };

이제 Button.js에서 Tailwind 스타일을 적용하면 훨씬 깔끔한 디자인을 만들 수 있습니다.

jsx

복사편집

const Button = ({ text, onClick, size = "medium", color = "blue", loading = false }) => { return ( <button onClick={onClick} disabled={loading} className={`rounded-full px-5 py-2 font-semibold shadow-md transition ${ color === "blue" ? "bg-blue-500 hover:bg-blue-600 text-white" : "" } ${loading ? "opacity-50 cursor-not-allowed" : ""}`} > {loading ? "로딩 중..." : text} </button> ); };

✅ Tailwind 적용 결과

• 버튼 모서리를 둥글게(rounded-full)
• 그림자 효과(shadow-md)
• 클릭 시 색상이 변하는 효과(hover:bg-blue-600)
• transition으로 부드러운 스타일 적용

---

5. 마무리 및 정리

이번 글에서는 재사용 가능한 버튼 컴포넌트를 만드는 방법을 배웠습니다.
버튼 하나만 만들어도 고려해야 할 점이 많다는 것을 깨달을 수 있었습니다.

📌 핵심 정리

✔️ props를 활용해 버튼 크기와 색상을 동적으로 조정
✔️ loading 상태를 추가해 로딩 UI 구현
✔️ Tailwind CSS를 적용해 깔끔한 스타일링

다음 글에서는 React에서 아이콘 버튼 만들기와 버튼 클릭 애니메이션 추가하기를 다뤄보겠습니다. 🚀