[Frontend] 컴포넌트란

목차 (OPEN)

• 🎯 컴포넌트 (Component)
• 📦 비유하자면: 컴포넌트 = 레고 블록 🧱
• 🧠 왜 컴포넌트가 중요할까
• 🧩 컴포넌트의 종류
• ❗ 주의사항

 

 

 

 

 

🎯 컴포넌트 (Component)

컴포넌트란 무엇인지를 한 줄로 정리하면,

UI (User Interface)를 구성하는 조각이다.

 

---

📦 비유하자면: 컴포넌트 = 레고 블록 🧱

UI를 컴포넌트로 만든다는 것은,

마치 레고로 집을 짓는 것과 똑같다고 보면 된다.

 

🔘 버튼 하나 👉🏻 레고 블록 하나

📝 입력창 하나  👉🏻 또 다른 레고 블록

🧾 카드 전체  👉🏻 여러 블록을 조합한 묶음

🏠 페이지 전체  👉🏻 작은 블록들로 조립된 완성품

 

즉, 복잡한 UI를 작고 독립적인 블록으로 쪼개서

필요한 위치에 가져다 붙이는 것이다.

 

---

🧠 왜 컴포넌트가 중요할까

1️⃣ 재사용성 ♻️

같은 버튼, 같은 카드, 같은 리스트 아이템 등을

사용할 때마다 다시 만들면 비효율적이기 때문에

컴포넌트로 한 번 만들어두고,

필요할 때마다 불러다 쓰는 것이다.

 

<Button label="로그인" />
<Button label="회원가입" />

 

2️⃣ 유지보수 🧼

버튼 스타일이 바뀌었다면,

모든 버튼을 찾아서 바꿀 필요 없이

컴포넌트 하나만 고치면 끝이기 때문에 매우 편리하다.

 

3️⃣ 분리와 관리 🗂

코드를 작게 나누면 읽기 쉽고, 관리도 편하기 때문에

각각의 UI 조각을 담당하는 컴포넌트 파일로 쪼개서 유지하면 좋다.

 

/components
  └── Button.tsx
  └── Card.tsx
  └── Navbar.tsx

 

---

🧩 컴포넌트의 종류

유형	설명	예시
🎨 프레젠테이셔널 컴포넌트	UI 표현만 담당	버튼, 카드 등
🧠 컨테이너 컴포넌트	로직 처리 중심	로그인 상태, 데이터 가져오기 등
🗺 페이지 컴포넌트	전체 화면을 구성하는 큰 단위	/Home, /Login 등
🔁 재사용 컴포넌트	프로젝트 어디서든 쓰는 범용 기능	Modal, Dropdown, Input

 

---

❗ 주의사항

컴포넌트화를 너무 집착하면,

버튼 안의 <svg> 까지 컴포넌트로 쪼개고 ..

그 안의 <path>도 컴포넌트로 만들고 ..

이렇게 오버엔지니어링될 수도 있기 때문에

"이 컴포넌트가 재사용될까?",

"이걸 따로 두는 게 코드가 더 이해하기 쉬우려나?"를

기준으로 판단해서 나누어주어야 한다.