📦 컴포넌트란 무엇인가?

처음에는 단순히 컴포넌트를 "재사용 가능한 UI 조각" 정도로 생각했다.
예를 들면 레고 블록처럼 화면 요소를 조립하는 단위. 그래서 버튼, 카드, 입력창 등 UI 요소들을 분리하긴 했지만, 왜 분리하는지, 어디까지 분리해야 하는지, 그리고 재사용 가능하게 만드는 기준에 대한 고민은 부족했다.

🎯 컴포넌트를 왜 나누는가?

React, Vue, Svelte, Angular 등 주요 프레임워크들은 모두 공통적으로 "컴포넌트는 UI의 구성 단위"라고 말한다.

"reusable UI elements for your app" - React
"UI를 독립적이고 재사용 가능한 일부분으로 분할" - Vue
"Components are the building blocks of applications" - Svelte
"컴포넌트는 Angular 애플리케이션을 구성하는 기본 단위" - Angular

결국 중요한 건 컴포넌트를 잘 나누는 기준이다. 일반적으로 다음 3가지를 기준으로 잡을 수 있다:

• 명확한 하나의 역할을 갖는다
• 재사용 가능하다
• 조립하여 확장하기 쉽다

🧱 점심 뭐먹지 미션에서의 고민

처음엔 모든 컴포넌트를 동일한 방식으로 설계하려고 했다. 예를 들어 버튼 두 개를 감싸는 ButtonWrapper를 만들 때에도, 내부에서 직접 버튼을 import할지, 외부에서 props로 버튼을 주입받을지 등의 방식에 대해 많은 고민을 했다.

그러면서 IoC (제어의 역전) 개념도 자연스럽게 알게 되었다. 어떤 컴포넌트는 스스로 내부를 통제하고, 어떤 컴포넌트는 외부에서 동작을 넘겨받는 게 더 적절하다.

예시:
ButtonWrapper처럼 강한 종속성이 있는 컴포넌트는 내부에서 직접 import
Form처럼 다양한 조합이 가능한 컴포넌트는 외부에서 구성 요소를 props로 전달받음
결론적으로 모든 컴포넌트가 동일하게 동작할 필요는 없다.

---

💡 컴포넌트 잘 나누기 위한 3가지 핵심 전략

1. headleass UI기반의 추상화하기
변하는 것 vs 상대적으로 변하지 않는 것
2. 한가지 역할만 하기
또는 한가지 역할만 하는 컴포넌트의 조합으로 구성하기
3. 도메인 분리하기
도메인을 포함하는 컴포넌트와 그렇지 않은 컴포넌트 분리하기

1. Headless UI 기반의 추상화

🎯 개념 요약
도메인 데이터와 UI를 분리하는 패턴이다.

데이터 추상화
ex) useCalendar 훅처럼 상태/로직만 관리하고, 실제 UI는 컴포넌트에서 책임지도록 분리한다.

동작 추상화(사용자의 상호작용)
아래 그림처럼 할 경우, 매우 복잡함.

아래처럼 추상화해서 이제 button 컴포넌트는 보여지는거에만 집중할 수 있다.

📌 핵심 포인트

• 도메인 로직은 useCalendar 훅에 있음
• UI는 상태를 몰라도 되고, 단순히 화면만 구성함 (Headless)
• 로직 변경은 훅에서, 디자인 변경은 UI에서 → 역할 분리로 유지보수 쉬움

hooks로 모듈화하기 → 변경에 유연해지려면 각 모듈이 한가지 일만 해야한다.! (핵심)

---

2. 한 가지 역할만 하는 컴포넌트의 조합

아래 이미지는 InputButton이라는 컴포넌트만 봐도 변경에 유연하지 못하다.!

이런 식의 설계는 UI가 바뀌거나 이벤트 처리가 달라질 때 대응이 어렵다. 컴포넌트가 너무 많은 책임을 지고 있기 때문이다.

✅ 개선된 구조

변경된 컴포넌트 코드

3. 도메인과 UI 분리

비즈니스 로직을 포함한 컴포넌트는 도메인을 알아야 한다.
하지만, 모든 컴포넌트가 도메인을 알 필요는 없다.

도메인 걷어내기

컴포넌트의 인터페이스가 표준에 가까워질수록 많은 사람들이 쉽게 이해할 수 있다.

이제 이녀석은 도메인을 모르게되면서 일반적인 이름을 갖게 되었다.

frameworkSelect는 도메인을 안다. container가 아니지만, 데이터에 접근한다. 필요한 데이터를 관리할때, 자율적인 컴포넌트가 된다. 외부의존성이 없다x

비즈니스로직은 본인이 처리하고, ui로직은 multiSelect 컴포넌트한테 위임하는 방식이다. (multiSelect컴포넌트는 도메인을 모른다.)

---

결론

잘 만든 컴포넌트는 일을 반복하는 작업을 없애준다. 또한 동료에게도 큰 도움이 된다.