🪝 14. Headless 컴포넌트 (Custom Hooks의 끝판왕)

🎯 이 섹션을 읽고 나면:

• '목 없는(Headless) 컴포넌트'란 단어가 의미하는 진짜 정체(Custom Hooks의 진화형)를 완벽히 이해한다.
• 디자인 요구사항이 크게 달라져도 로직 코드를 흔들지 않는 분리(Separation) 설계를 할 수 있다.
• 사내 공통 훅(Hooks)을 리뷰할 때 UI 책임과 로직 책임을 구분할 수 있다.

📋 목차

• 🤔 왜 알아야 하는가: UI와 로직이 한 몸일 때의 불치병
• 🏗️ 비유로 먼저 이해하기
• 🧩 극의 체득: 실전 타이머 헤드리스 훅 이식 수술
  • ❌ 1단계: UI와 로직이 강하게 결합된 원본
  • ✅ 2단계: 로직만 Custom Hook으로 분리하기 (Headless)
  • ✅ 3단계: 각 화면이 원하는 UI로 조립하기
• 🌟 (심화 보너스) 속성 주입기(Prop Getters) 패턴

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 10분 / 핵심 파트: 6분

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

• 영숙(디자이너): "영철씨, 결제 타이머 디자인을 화면마다 다르게 쓰고 싶어요. 모바일에서는 원형 진행률, 메인에서는 큰 숫자, 헤더에서는 작은 텍스트로 보여주고 싶어요."
• 영철(신입): "타이머 로직이랑 CSS가 한 컴포넌트에 묶여 있어서 프롭을 계속 늘려야 할 것 같아요. 이 방식이면 다음 개편 때도 같은 문제가 반복되겠네요."
• 영호(리드): "좋은 진단이에요. 핵심 로직은 Custom Hook으로 빼고, UI는 사용하는 쪽에서 조립하게 만듭시다. 그게 헤드리스(Headless) 패턴의 핵심이에요."

🤔 왜 알아야 하는가: UI와 로직이 한 몸일 때의 불치병

13강에서 배운 컴파운드 컴포넌트는 훌륭하지만, 어쨌든 <div> 껍데기 같은 기본 레이아웃과 DOM 뼈대를 마더 컴포넌트가 어느 정도 들고 있어야 합니다.
하지만 현업에서는 "동작(체크박스 기능, 드래그 드롭, 타이머 등)은 똑같은데 화면 표현은 제품 맥락마다 달라지는" 요구가 자주 나옵니다.

🤔 잠깐, 먼저 생각해봐
"비밀번호 규칙 검증 폼"이 있다고 쳐보자.
회원가입 페이지에선 거대한 팝업 박스 안의 빨간 글씨로 경고를 그리지만, 마이페이지 비밀번호 수정창에서는 input 박스 바로 아래 아주 작은 ✓ 아이콘으로 표현해야 해.
둘 다 **"비밀번호가 8자 이상이고 특수문자가 포함되었는지 체크하는 뇌(Logic)"**는 같잖아? 어떻게 그 뇌만 쏙 빼먹지?

🏗️ 비유로 먼저 이해하기

🧒 5살에게 설명한다면?

1. 영철이는 로봇 공작소 사장님이야. "걸어 다니는 로봇"을 주문받으면 쇳덩어리로 몸체도 다 깎고 모터도 달아서 완성된 은색 로봇을 고객에게 건네줬어(일반 컴포넌트).
2. 고객(영숙) 왈: "사장님, 다음 주문요! 이번엔 걷는 인형인데... 첫 번째는 포근한 테마, 두 번째는 투명한 유리 테마, 세 번째는 SF 느낌의 커스텀 테마로 만들어주세요!"
3. 영철이는 매번 새 외형을 통째로 다시 만들다 보니 점점 지쳐갔어.
4. 이때 영호 등장: "사장님, 그 방식은 위험해요. 그 기계 뇌(CPU 칩)와 모터 관절 뼈대만(Headless) 딱 조립해서 봉투에 담아 넘기세요. 겉 스킨, 색상, 배치 같은 얼굴(Head / UI)은 고객이 직접 그 뼈대 위에 입히도록 말이죠!"

이것이 Head(외형 UI/DOM 요소)를 날려버린 무형의 로직 코어 장치, Headless(헤드리스) 패턴입니다. React 생태계에선 주로 Custom Hook 이라는 완벽한 수단으로 형태를 띠게 됩니다.

🧩 극의 체득: 실전 타이머 헤드리스 훅 이식 수술

타이머 컴포넌트를 예로 들어, UI와 로직을 단계적으로 분리해 보겠습니다.

❌ 1단계: UI와 로직이 강하게 결합된 원본

// 뇌와 얼굴이 한 덩어리로 유착된 컴포넌트 (디자인 변경 불가!)
function OldDeathTimer({ initialSeconds }) {
  // --- 🧠 뇌(로직) 영역 ---
  const [timeLeft, setTimeLeft] = useState(initialSeconds);
  const isDanger = timeLeft <= 5;
 
  useEffect(() => {
    // setInterval 1초마다 까먹는 로직... (길어서 생략)
  }, []);
  // --- 🧠 뇌 영역 끝 ---
 
  // --- 👤 얼굴(UI/DOM) 영역 ---
  // 디자인이 원형 진행률로 바뀌면 로직까지 함께 수정해야 한다.
  return (
    <div className="border border-black p-4">
      <h2 style={{ color: isDanger ? 'red' : 'black' }}>
        남은 시간: {timeLeft}초!
      </h2>
      <button onClick={() => setTimeLeft(initialSeconds)}>리셋</button>
    </div>
  );
  // --- 👤 얼굴 영역 끝 ---
}

✅ 2단계: 로직만 Custom Hook으로 분리하기 (Headless)

먼저 화면을 그리는 JSX를 걷어내고, 타이머 상태와 조작 함수만 반환하는 훅을 만든다.

// 🎯 Headless Hook: 오직 기능(타이머)과 상태(남은 초)만 관리하는 순수 뇌
export function useCountdownTimer(initialSeconds) {
  const [timeLeft, setTimeLeft] = useState(initialSeconds);
  const isDanger = timeLeft <= 5;
 
  // setInterval 로직 (아까랑 같음)
  useEffect(() => { ... }, []);
 
  const resetTimer = () => setTimeLeft(initialSeconds);
 
  // UI(div, span)는 리턴하지 않는다.
  // 계산된 상태와 조작 함수만 넘겨서 화면은 호출자가 결정하게 한다.
  return {
    timeLeft,
    isDanger,
    resetTimer
  };
}

✅ 3단계: 각 화면이 원하는 UI로 조립하기

이제 각 화면은 같은 useCountdownTimer 로직을 가져오되, 자신에게 맞는 마크업과 스타일을 선택한다.

// UI 1: 관리자용 텍스트 타이머
function AdminTextTimer() {
  const { timeLeft, resetTimer } = useCountdownTimer(60);
 
  return (
    <div>
      <p>[관리자 경고] 세션 만료까지 {timeLeft}s 남음.</p>
      <button onClick={resetTimer}>연장하기</button>
    </div>
  );
}
 
// UI 2: 모바일용 원형 타이머
function MagicBubbleTimer() {
  const { timeLeft, isDanger, resetTimer } = useCountdownTimer(60);
 
  return (
    <div className={`rounded-full p-10 ${isDanger ? 'bg-red-500' : 'bg-blue-300'}`}>
      <span className="text-4xl text-white drop-shadow-lg">
        {timeLeft}
      </span>
      <div onClick={resetTimer} className="hover:scale-110 cursor-pointer">
        ✨ 마법 초기화
      </div>
    </div>
  );
}

이제 isMobileCircle, isAdminText 같은 표현용 프롭을 계속 추가하지 않아도 된다. 타이머 규칙은 훅이 책임지고, 화면의 구조와 스타일은 호출자가 책임진다. 이 분리가 헤드리스 패턴의 실무 가치다.

🌟 (심화 보너스) 속성 주입기(Prop Getters) 패턴

해외 유명 Headless UI 라이브러리(Tanstack Table, Downshift 등)를 살펴보면, 저 무형의 뇌가 그냥 timeLeft 숫자 값만 넘겨주는 걸 넘어, "사용자가 UI 태그를 만들 때 이런 접근성(aria) 속성이랑 onClick 이벤트 핸들러를 빠트리지 말고 꼭 같이 넣으세요" 하고 옵션 묶음(props 객체)을 통째로 넘겨주는 기법을 씁니다.

// 뇌(Hook) 속의 진화: Prop Getters 발사기
function useDropdownHeadless() {
  const [isOpen, setIsOpen] = useState(false);
 
  // 이 무형의 뇌가, 미래에 껍데기가 될 UI의 속성표 뭉치를 미리 만들어준다.
  const getToggleButtonProps = () => ({
    "aria-expanded": isOpen,    // 시각장애인용 상태표시
    id: "magic-dropdown-btn",
    onClick: () => setIsOpen(!isOpen) // 내가 만든 토글 함수 강제 결합
  });
 
  return { isOpen, getToggleButtonProps };
}
 
// 사용자(UI 찰흙 장인)의 결합
function MyShinyDropdown() {
  const { isOpen, getToggleButtonProps } = useDropdownHeadless();
 
  // 버튼에 getToggleButtonProps()가 뱉어낸 객체의 키-값을 스르륵 풀어서 흩뿌린다!
  return (
    <>
      <button className="shiny-gold-btn" {...getToggleButtonProps()}>
        나의 토글
      </button>
      {isOpen && <div>까꿍</div>}
    </>
  );
}

이게 왜 유용한가?: UI를 만드는 사람은 마크업과 스타일에 집중할 수 있고, 훅 설계자는 접근성 속성, 키보드 이벤트, 클릭 핸들러를 getButtonProps 안에 함께 제공할 수 있다. 역할이 나뉘면서도 필수 동작을 빠뜨릴 가능성이 줄어든다.

🏁 이번에 배운 내용 총정리

💡 한 줄로 기억하기
"보이는 것(UI)과 보이지 않는 생각(Logic)의 결합을 분쇄하라."
여러 환경에서 모양만 다르고 똑같은 기능을 반복해서 짜고 있다면, 당신이 지금 당장 뽑아내서 격리해야 할 것은 UI 조각이 아니라 'Headless Custom Hook' 칩셋 설계도다.

📝 마무리 퀴즈

Q1. useWindowSize (브라우저 가로 세로 픽셀을 잡고 리사이즈를 추적하는 훅)나 우리가 배운 useCountdownTimer 같은 로직들을 굳이 React 일반 컴포넌트(DOM 요소 리턴)로 만들지 않고 'Headless 훅'으로 분리해야 하는 가장 결정적인 이유는 무엇인가요?

• A) 클래스 기반 React 생태계의 잔재를 지우기 위해.
• B) 이 로직들 자체는 눈에 보이는 '가시적 형태(디자인)'를 띨 필요가 없으며, 어느 구석의 부모 컨테이너든, 꼬투리 말단 텍스트 태그든 자유자재로 그 계산된 '데이터 값'만 주입받아서 자기 옷에 맞춰 입어야 하는 순수 종속성 없는 비즈니스/환경 함수이기 때문.
• C) Headless 훅은 빌드 과정에서 서버리스(Serverless) 클라우드 환경으로 컴파일되어 연산 속도가 무한에 수렴하기 때문.

✅ 정답: B

💡 상세 해설: useWindowSize를 컴포넌트 <WindowSizeReporter>로 만들고 그 결과를 다시 props로 내려보내면, 화면 구조가 바뀔 때마다 데이터 전달 경로도 흔들립니다. 훅으로 만들면 { width, height } 데이터만 필요한 컴포넌트가 직접 가져다 쓸 수 있어 UI 구조와 환경 로직의 결합도가 낮아집니다.

Q2. 헤드리스 훅 패턴의 'Prop Getters(옵션 뭉치 발사기)' 심화 기법을 사용할 때, 부모에서 ... (스프레드 연산자) 문법을 통해 props를 주입하는 코드의 작동 방식을 바르게 이해한 것은?

const { getSlotProps } = useSlotMachineHeadless();
<button {...getSlotProps()} />

• A) 자바스크립트는 저 구문을 허용하지 않으므로 오류가 발생한다. 반드시 id={getSlotProps().id} 처럼 일일이 적어야 한다.
• B) getSlotProps()는 사실상 리액트 가상 돔 엔진에 직접 접속하는 해킹 스크립트를 뱉어낸다.
• C) 훅이 내부에서 계산하여 뱉어준 객체(예: { onClick: fn, "aria-hidden": true })의 속성 키와 값들을 리액트 JSX 태그의 수많은 프롭스 파라미터들로 스르륵 해체하여 한 방에 전부 전달해 주는 자바스크립트 최강의 객체 바인딩 마법이다.

✅ 정답: C

💡 상세 해설: Spread Attributes 문법의 마법입니다. 이 문법 덕분에 헤드리스 훅 창조자는 내부 접근성(a11y) 속성이 20개든, 마우스 이벤트가 5종류든 그냥 큰 객체 뭉치 하나를 뱉어버리면 끝납니다. UI를 입히는 사용자(Front-end Dev) 측은 자신이 디자인한 이집트 풍 황금 버튼 껍데기를 만들어 놓고 그 곳에 ...getSlotProps() 이 포장지 해체 주문 딱 하나를 외우기만 하면, 훅이 짜둔 거미줄 같은 25개의 속성과 함수들이 순식간에 저 껍데기 위젯 속으로 강제로 스며들어 접착(Bind)되는 기적을 발휘합니다. DX(개발 경험)의 정점이라 불리는 구조죠.

Q3. 영호가 헤드리스(Headless) 구조로 달력(Datepicker)의 작동 코어 뇌를 분리해두었을 때, 다음 중 이 '분리 아키텍처' 덕분에 회사 전체적으로 얻을 수 있는 이득을 모두 서술해 보세요.

✅ 정답 및 주관식 해설:

1. 코드 재사용의 확장: 한 번 잘 짜둔 Headless Hook의 달력 계산 함수와 월 이동 로직은 PC 웹 달력에도, UI 체계가 다른 모바일 화면에도 재사용할 수 있습니다. 표현 계층이 바뀌어도 날짜 계산 로직은 그대로 검증된 코어로 남습니다.
2. 테스트 고도화의 쉬움: UI(버튼 색상 깔리고 애니메이션 돌고..)를 테스트하려면 복잡한 테스팅 도구가 필요하지만, Headless Hook은 본질이 순수 로직이므로 (값을 넣어주면 다음 달 데이터를 잘 뱉는지) 단위 테스트(Unit Test)를 짜기가 백만 배는 쉽고 빠릅니다. UI 병목 없는 순수 코어의 탄생입니다!

🐣 영철이의 퇴근 일기

디자인 바뀔 때마다 쇳덩이 로봇 외피만 하염없이 갈아치우던 나날들이 떠오른다. 로직과 UI를 분리한다는 비유가 오늘 내용의 핵심을 잘 잡아줬다.

💡 "UI 껍데기를 날려라(Headless). 오직 순수한 기능과 리모컨(Hook)만 뱉어내고, 그 옷 입히는 건 찰흙 장인(사용자 컴포넌트)에게 완벽히 위임하라."

Prop Getters 기법 쓴 건 완전히 충격적이었다. 내가 컴포넌트의 뇌를 짤 때, 남들이 클릭 핸들러나 접근성 고려 못할 것까지 다 장착한 옵션 뭉텅이를 {...getSlotProps()}로 한 방에 쏴준다고? 이건 거의 예술의 경지다. 드디어 리액트 설계의 정점을 봤다는 찐한 성취감이 몰려온다. 영호 선배 최고!