💡 13. 컴파운드 컴포넌트 (Compound Components)

🎯 이 섹션을 읽고 나면:

• <Select> 태그와 <option> 태그들처럼, 여러 컴포넌트가 하나로 뭉쳐 작동하는 패턴의 원리를 파악한다.
• Props 지옥 없이도, 부모 컨테이너가 자식 조각(블록)들에게 조용히 상태를 퍼트려주는 마법(Context 연계)을 스스로 구현할 수 있다.
• 사내 디자인 시스템(UI 라이브러리)을 만들 0티어 핵심 지식(Dot Notation 표기법)을 손에 넣는다.

📋 목차

• 🤔 왜 알아야 하는가: Props로 욱여넣기의 한계치 도달
• 🏗️ 비유로 먼저 이해하기
• 🧩 극의 체득: 실전 컴파운드 블록 구축하기
  • ✅ 1. 핏줄 만들기 (보이지 않는 공유 State)
  • ✅ 2. 마더십(어미) 컴포넌트 선언
  • ✅ 3. 하위 부품(자식 파츠)들 빚어내기
  • ✅ 4. 점 표기법(Dot Notation) 연결 합체

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 15분 / 핵심 파트: 8분

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 영수(PM):"영호 님! 우리가 직접 만든 드롭다운(Dropdown) 공통 컴포넌트 말이에요. 어떤 페이지에선 눌렀을 때 애니메이션을 넣고 싶고, 어떤 곳에선 항목들에 아이콘을 박고 싶대요."
• 영호(리드):"영철 님, 혹시 또 드롭다운에 hasAnimation, iconType 프롭스 뚫고 계셨습니까?"
• 영철(신입):(흠칫) "...어떻게 아셨어요?"
• 영호(리드): "다 지우시고, 저를 따라오세요. 우리가 만들 건 완제품 햄버거가 아니라, 그저 빵, 패티, 치즈라는 재료 통일 뿐입니다. 컴파운드 패턴을 알려드리죠."

🤔 왜 알아야 하는가: Props로 욱여넣기의 한계치 도달

우리는 자주 복합적인 UI 요소들을 만납니다.
아코디언(열렸다 닫히는 패널), 탭(Tab), 로딩이 도는 드롭다운 메뉴, 슬라이더 캐러셀 등이 대표적이죠.

🤔 잠깐, 먼저 생각해봐
드롭다운 컴포넌트 하나에 배열 데이터(options)만 생짜 프롭스로 던져서 그릴 때의 끔찍함을 느껴본 적 없는가?

// ❌ 영철이의 끔찍한 JSON 노가다 선언형 드롭다운
const myOptions = [
  { label: "내 정보", value: "info", icon: "👤", disabled: false },
  { label: "삭제하기", value: "delete", icon: "🗑️", disabled: true, textDanger: true } // 🚨 커스텀의 한계
];
 
// 이 껍데기 하나로 내부의 미세한 색상, 아이콘 조정이 가능할까?
<SuperDropdown 
  options={myOptions} 
  onChange={handleChange} 
  closeOnSelect={true}
  animation={{ speed: 300, type: 'fade' }} // 점점 데이터 구조가 기괴해진다!
/>

위 코드는 12강에서 말했던 개방-폐쇄 원칙 파괴의 전형입니다. 이 데이터 배열만으로는 "삭제하기"라는 텍스트 한 줄만 빨간색으로 그린다거나, 중간에 --- 구분선(Divider)을 딱 하나 넣고 싶다는 자잘한 커스텀 UI 요구를 도저히 예쁘게 수용할 수가 없습니다.

이걸 완벽하게 해결해주는 아름다운 HTML 내장 태그들을 우리는 이미 경험해봤습니다. 바로 이것입니다:

<select>
  <option>짜장면</option>
  <option selected>짬뽕</option>
</select>

부모(<select>)와 자식(<option>)이 태그로 분리되어 있으면서도, 마치 한 몸처럼 끈끈하게 붙어서 하나의 기능(선택하기)을 처리합니다. 이 형태를 리액트로 그대로 구현하는 것이 바로 **컴파운드 컴포넌트 (Compound Components)**입니다.

🏗️ 비유로 먼저 이해하기

🧒 5살에게 설명한다면?

영철이의 메뉴얼식 완제품 장난감:
공장에서 로봇 장난감을 통째로 굳혀서 만들어 옴.
"이 로봇 머리에 리본 달아줘"라고 하면 로봇 공장 자체를 박살 내고 도면(Props 파라미터)을 개조해야 함.

컴파운드 패턴 (레고 블록 조립 세트):

1. 레고 몸통(Dropdown)
2. 레고 스위치(Toggle)
3. 레고 팔(Item)
   위 3개를 박스에 담아 출시함.
   사용자는 이 블록 세트들을 가져와서 자기 마음대로 순서를 바꾸거나, 팔 사이에 스티커(커스텀 UI)를 맘대로 끼워 넣는 조립 과정을 가짐! 하지만 얘네 셋은 어쨌든 한 가족 블록이라서, 팔을 누르면 스위치가 똑딱하며 반응하도록 핏줄(Context API)이 내부적으로 보이지 않게 통하고 있어.

🧩 극의 체득: 실전 컴파운드 블록 구축하기

우리의 목표는 다음과 같이 아름답게 작성되는(Dot Notation 사용) 드롭다운을 만드는 것입니다.

// 🎯 최종 컴파운드 달성 목표 (사용하는 쪽 코드)
<Dropdown>
  <Dropdown.Toggle>메뉴 열기</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item onClick={goProfile}>내 정보</Dropdown.Item>
    <Divider /> {/* 와! 구분선을 내 마음대로 낄 수 있다! */}
    <Dropdown.Item onClick={logout}>
      <span className="text-red">빨간 로그아웃</span> {/* 완전 커스텀 자유! */}
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

✅ 1. 핏줄 만들기 (보이지 않는 공유 State)

이 블록들은 서로 떨어져 선언되지만 "드롭다운 문이 열렸는가(isOpen)?" 상태를 알아야 합니다. 이 통로를 위해 11강 방사능 격리법에서 썼던 Context API를 꺼내 듭니다. 여기선 부모 바로 아래 계층들만 쓰니까 방사능 걱정은 크게 안 해도 됩니다!

import { createContext, useContext, useState } from 'react';
 
// 1️⃣ 이 블록들끼리만 몰래 소통할 비밀 텔레파시(Context) 생성
const DropdownContext = createContext();
 
function useDropdownContext() {
  const context = useContext(DropdownContext);
  if (!context) throw new Error("Dropdown 하블록들은 Dropdown 부모 안에서만 써야 해!");
  return context;
}

✅ 2. 마더십(어미) 컴포넌트 선언

상태를 보관하고, 텔레파시 공간을 깔아줄 부모 껍데기입니다.

// 2️⃣ 대가리(Wrapper) 컴포넌트 정의
export function Dropdown({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(prev => !prev);
 
  // 텔레파시 방파고, 하위 레고 블록들(children)을 그냥 순수하게 랜더링!
  return (
    <DropdownContext.Provider value={{ isOpen, toggle }}>
      <div className="dropdown-wrapper relative">{children}</div>
    </DropdownContext.Provider>
  );
}

✅ 3. 하위 부품(자식 파츠)들 빚어내기

이제 조각들을 만듭니다. 이 조각들은 밖에서 마구잡이로 배열되든 뭐하든, 어떻게든 텔레파시 주파수로 어미의 상태만 뽑아 먹으면 됩니다.

// 3️⃣ 부품 1: 스위치 (누르면 위에서 짠 toggle 함수 발동)
function Toggle({ children }) {
  const { toggle } = useDropdownContext(); // 텔레파시 뽑기
  return <button className="toggle-btn" onClick={toggle}>{children}</button>;
}
 
// 4️⃣ 부품 2: 팝업 메뉴 (문이 닫혀있으면 자기 자신 파괴)
function Menu({ children }) {
  const { isOpen } = useDropdownContext(); // 텔레파시 뽑기
  if (!isOpen) return null; // 닫혀있네? 안 그려!
  
  return <div className="dropdown-menu absolute box-shadow">{children}</div>;
}
 
// 5️⃣ 부품 3: 개별 버튼 (누르면 기능 실행 후 드롭다운 문 닫기)
function Item({ children, onClick }) {
  const { toggle } = useDropdownContext();
  const handleClick = (e) => {
    onClick?.(e); // 할 일 하고
    toggle();     // 이 녀석이 눌러도 문을 닫도록 액션 호출!
  };
  return <div className="dropdown-item" onClick={handleClick}>{children}</div>;
}

✅ 4. 점 표기법(Dot Notation) 연결 합체

마지막 간지(뽀대) 타임입니다. 이 컴포넌트 블록들이 하나의 가족이라는 것을 명시하기 위해, 네이밍을 묶어줍니다.

// Javascript에서 함수는 객체(Object)다! 고로 속성을 추가할 수 있다.
Dropdown.Toggle = Toggle;
Dropdown.Menu = Menu;
Dropdown.Item = Item;
 
export default Dropdown;
// 끝! 이제 Radix UI, Headless UI에서나 보던 대기업급 컴포넌트가 내 앱에 들어왔다!

🏁 이번에 배운 내용 총정리

💡 한 줄로 기억하기
"복잡한 재사용 UI(모달, 탭, 드롭다운)를 만들려거든 Props에 혐오스러운 JSON 배열을 쑤셔 넣지 말고, 조각 조각난 레고 블록 컴파운드로 찢어 발겨라."

🐣 영철이의 퇴근 일기

Json 배열 생짜로 던지는 방식만 주야장천 팠었는데... Radix UI나 Headless UI에서 보던 그 간지 나는 <Dropdown.Item> 점 표기법이 이렇게 만들어지는 거였다니.

💡 "부모는 텔레파시(Context API)를 숨기고, 자식들은 조립되는 위치 상관없이 조용히 그 힘을 빨아먹는 레고 블록 생태계. 이것이 컴파운드 컴포넌트다!"

컴포넌트 안에 남의 HTML을 아무리 구겨 넣어도 텔레파시는 뚫고 들어간다는 말이 정말 시원했다. 당장 사내 디자인 시스템 엎을 때 내가 '이건 컴파운드로 가야 합니다'라고 어필해 봐야겠다. 이 짜릿한 손맛을 잊기 전에 집에 가서 탭 컴포넌트 하나 스크래치로 직접 짜봐야겠다.

📝 마무리 퀴즈

Q1. 당신은 영철이의 더러운 JSON Array 드롭다운을 컴파운드 컴포넌트 패턴으로 리팩토링했습니다. 이때 발생하는 설계상(아키텍처)의 가장 거대하고 아름다운 장점 한 가지를 고르세요.

• A) 컴포넌트가 한 파일 내의 한 줄로 줄어들면서 번들링 최적화 속도가 300% 향상된다.
• B) 드롭다운 내부의 특정 <Item /> 태그 사이에 <div>--- 절취선 ---</div> 같은 완전히 이질적인 UI나 리액트 컴포넌트를 그냥 생짜로 밀어 넣어도 기존 시스템(문 닫히고 열림 상태 관리)이 1도 깨지지 않는 완벽한 확장성(개방 렌더링).
• C) Context API를 쓰기 때문에 모든 데이터가 브라우저의 LocalStorage에 영구 저장되는 마법 같은 동기화 경험.

✅ 정답: B

💡 상세 해설: 제어 역전 찢기(IoC)의 궁극기인 설명입니다. 프롭스로 options=[{}]식으로 던질 때는 그 배열에 맞게 내부에서 for문과 마크업이 굳어져(하드코딩) 있어서 커스텀 UI를 넣기가 모래시계 구멍 통과하기만큼 더러웠죠. 반면 <Menu> 안에 <Item/> 레고를 조립하다가 중간에 빨간 줄 CSS를 박든, 거대한 내 정보 박스 UI를 섞여 박든 리액트는 그냥 가볍게 렌더링해 줍니다. 껍데기만 줄 뿐 내부 채우기는 사용자 맘인 완벽한 확장성을 가집니다.

Q2. 컴파운드 컴포넌트를 만들 때, 왜 굳이 부모(Dropdown)가 상태(isOpen)와 toggle 함수를 자식들(Toggle, Item)에게 props가 아닌 Context API 텔레파시로 뿌려대며 징그럽게 우회하는 수고를 할까요?

// 부모
<Dropdown>
   {/* props가 아니라 Context로 자식의 자식의 자식일지라도 관통해서 쏴준다! */}
   <div className="layout-box">
     <Dropdown.Toggle>열기</Dropdown.Toggle>
   </div>
</Dropdown>

• A) 클래스 기반 React 생명주기 API가 더 이상 props를 지원하지 않기 때문에.
• B) children 사이사이에 유저가 자기 맘대로 깊은 <div> 태그들이나 래퍼 껍데기 레이아웃을 겹겹이 끼워 넣을 수 있는데, 직접 props로 내리면 이 끼어든 장애물 때문에 Props Drilling이 꽉 막혀버리기 때문.
• C) 타입스크립트(TypeScript)에서 children에 prop을 강제로 쑤셔넣으면 즉시 런타임 에러 any type never를 뿜어내기 때문.

✅ 정답: B

💡 상세 해설: 만약 Context를 안 쓴다면 옛날(과도기) 방식인 React.Children.map 과 cloneElement라는 악명 높은 구식 함수를 이용해 억지로 부모 프롭스를 끼워 넣어야 했습니다. 하지만 이 옛 방식은 중간에 껍데기 레이아웃 래핑 <div>가 끼어들면 구멍이 끊어져 작동을 안 하는 치명적 버그가 터집니다! 반면 Context는 아무리 껍데기 DOM 노드 지하던전으로 깊이 유저가 조립해 들어가더라도 useContext만 뽑아 쓰면 텔레파시를 즉시 관통 수신하므로 완벽한 설계 유연성을 확보할 수 있습니다.

Q3. 컴파운드 컴포넌트의 끝판왕 마감칠 기술인 "점 표기법(Dot Notation)"을 사용하는 것이 단순히 멋(간지) 목적을 넘어, 개발 경험(DX)과 협업자들에게 남기는 강력한 이점은 무엇인지 주관식으로 서술하세요.

import { Dropdown } from './Dropdown';
 
<Dropdown.Menu>...</Dropdown.Menu>

✅ 정답 및 주관식 해설:

"점 표기법(Dot Notation)은 컴포넌트들의 소속감과 네임스페이스를 명확하게 단속해 주는 가드레일입니다.
첫째, 협업 개발자가 Dropdown 컴포넌트를 치고 .을 누르는 순간 IDE 자동완성(Intellisense)에 이 컴포넌트가 품을 수 있는 레고 부품 목록(Toggle, Item, Menu)이 쫙 뜨면서 문서를 볼 필요조차 없이 어떻게 조립해야 하는지 명쾌한 단서를 줍니다.
둘째, 수만 개의 수입 파일이 굴러다니는 거대 폴더에서 고작 찌꺼기 레고 조각들인 Item, Menu라는, 다른 앱에서도 흔하게 쓸 법한 너무 평범한 이름들이 전역 폴더 공간과 Import 스페이스를 이름 충돌로 작살내는 것을 방지(패키징 캡슐화)할 수 있습니다."