React는 컴포넌트 기반,,,그래서 컴포넌트가 뭔데?

React를 시작하면 꼭 듣게 되는 말!

“React는 컴포넌트 기반이야.”
“컴포넌트를 잘게 나눠서 써야 돼.”

🤔 근데... 컴포넌트가 도대체 뭐길래 자꾸 나오는 걸까요?

이번 글에서는
✅ 컴포넌트가 뭐고
✅ 왜 중요한지
✅ 직접 예시까지
진짜 쉽게 설명드릴게요!

---

1️⃣ 컴포넌트란 쉽게 말하면 '부품'이에요

React에서 컴포넌트는
👉 웹 화면을 작은 조각으로 나눠서 만드는 방법이에요.

예를 들어, 쇼핑몰 웹사이트가 있다고 해볼게요:

• 상단 메뉴
• 상품 카드
• 장바구니 버튼
• 하단 푸터

이 각각을 하나의 컴포넌트로 만들어서 재사용하는 거예요!

📌 컴포넌트는 '화면의 재사용 가능한 조각'이라고 생각하면 돼요.

---

2️⃣ 왜 굳이 컴포넌트로 나눠야 할까?

컴포넌트로 쪼개면 뭐가 좋은지 궁금하죠?

✅ 장점 1. 재사용 가능

같은 디자인, 같은 기능을
복붙하지 않고 한 번만 만들어서 여러 곳에서 사용 가능!

✅ 장점 2. 유지보수 쉬움

버튼 하나 바꾸려면?
👉 해당 컴포넌트만 고치면 전체가 자동으로 반영됨!

✅ 장점 3. 협업에 유리

개발자들이 각자 맡은 컴포넌트만 만들고 연결하면 되니까 협업이 쉬워요.

---

3️⃣ 함수형 컴포넌트 예제 보기 (진짜 쉬운 코드)

React에서는 컴포넌트를 함수처럼 만들어요:

jsx

복사편집

// MyButton.js function MyButton() { return <button>클릭하세요</button>; }

이제 이 MyButton 컴포넌트를 다른 곳에서 사용할 수 있어요:

jsx

복사편집

// App.js import MyButton from './MyButton'; function App() { return ( <div> <h1>안녕하세요</h1> <MyButton /> </div> ); }

🛠️ 이렇게 내가 만든 태그처럼 <MyButton />을 직접 쓸 수 있어요!

---

4️⃣ 컴포넌트의 구조는 이렇게 생겼어요

jsx

복사편집

function 컴포넌트이름() { return ( <div> // JSX 코드 작성 </div> ); }

✅ 이름은 항상 대문자로 시작해야 해요
(소문자로 시작하면 HTML 태그로 인식됩니다)

---

5️⃣ 여러 번 쓸 수 있어요 (재사용)

jsx

복사편집

function App() { return ( <div> <MyButton /> <MyButton /> <MyButton /> </div> ); }

이렇게 한 번 만든 컴포넌트를 반복해서 사용할 수 있어요!
이게 바로 React가 편한 이유 중 하나예요 🙌

---

✏️ 한 줄 정리

컴포넌트는 React에서 **

컴포넌트는 React에서 화면을 작은 부품처럼 쪼개서 만드는 기본 단위예요.
재사용도 쉽고, 협업도 쉽고, 유지보수까지 편해서 반드시 익혀야 할 핵심 개념입니다!