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

🎯 이 섹션을 읽고 나면:

• '목 없는(Headless) 컴포넌트'란 단어가 의미하는 진짜 정체(Custom Hooks의 진화형)를 완벽히 이해한다.
• 디자이너가 미쳐 날뛰는(...) 어떤 기괴한 UI 요구사항에도, 로직 코드를 단 한 줄도 부수지 않고 살아남는 전설적인 분리(Separation) 설계를 할 수 있다.
• 사내 공통 훅(Hooks) 개발 리드의 자리를 쟁취할 수 있다.

📋 목차

• 🤔 왜 알아야 하는가: UI와 로직이 한 몸일 때의 불치병
• 🏗️ 비유로 먼저 이해하기
• 🧩 극의 체득: 실전 타이머 헤드리스 훅 이식 수술
  • ❌ 1단계: 몸통(UI)과 뇌(Logic)가 융합된 끔찍한 괴물 원본
  • ✅ 2단계: 뇌만 적출해서 봉투(Custom Hook)에 담기 (Headless)
  • ✅ 3단계: 디자이너 마음대로 빙의(스킨 입히기) 결합 시간
• 🌟 (심화 보너스) 속성 주입기(Prop Getters) 패턴

📌 이 문서를 읽기 전에

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

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

• 영숙(디자이너):"영철씨! 저번에 만든 그 결제 타이머 타이머요. 디자인 개편하면서 모바일에서는 동그라미로 빙글빙글 돌면서 남은 초가 뜨게 할 거고요, 메인에서는 크게 글자로, 헤더에서는 작게 텍스트로만 띄워주세요. 아, 글씨 색깔도 남은 시간에 따라 알록달록하게 바꿔주시고요!"
• 영철(신입):"...네? 타이머 로직이랑 CSS 디자인이랑 한 덩어리로 굳혀놨는데... 이걸 다 뜯어고쳐야 하나요? isMobileCircle, isHeaderSmall 프롭스 또 500개 뚫어야겠네 엉엉..."
• 영호(리드): "영철 님, 그래서 CSS랑 로직을 분리하는 게 프론트의 철통 원칙입니다! 핵심 로직(Raw Logic) 만 남기고 스타일(UI) 은 싹 걷어내세요. 진정한 헤드리스(Headless) 로 갈아엎읍시다."

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

13강에서 배운 컴파운드 컴포넌트는 훌륭하지만, 어쨌든 <div> 껍데기 같은 기본 레이아웃과 DOM 뼈대를 마더 컴포넌트가 어느 정도 들고 있어야 합니다.
하지만 현업에서는 "동작(체크박스 기능, 드래그 드롭, 타이머 등)은 완벽히 똑같은데 껍데기 모양새는 우주 끝까지 달라지는" 괴상한 요구가 쏟아집니다.

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

🏗️ 비유로 먼저 이해하기

🧒 5살에게 설명한다면?

1. 영철이는 로봇 공작소 사장님이야. "걸어 다니는 로봇"을 주문받으면 쇳덩어리로 몸체도 다 깎고 모터도 달아서 완성된 은색 로봇을 고객에게 던져줬어(일반 컴포넌트).
2. 고객(영숙) 왈: "사장님, 다음 주문요! 이번엔 걷는 인형인데... 외피는 포근한 곰 인형으로, 그 다음 건 유리로 된 투명 건담으로, 그 다음건 징그러운 촉수 외계인으로 만들어주세요!"
3. 멘탈이 나간 영철이. 쇳덩이 은색 로봇 몸통 껍질을 일일이 부수고 다시 외형을 조각하다 쓰러짐.
4. 이때 영호 등장: "사장님, 바보세요? 그 기계 뇌(CPU 칩)와 모터 관절 뼈대만(Headless) 딱 조립해서 봉투에 담아 넘기세요. 겉 스킨, 털가죽, 유리 부품 같은 얼굴(Head / UI)은 고객이 직접 찰흙을 사서 그 뼈대 위에 빚어 입히도록 말이죠!"

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

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

타이머 컴포넌트를 예로 들어, 악몽 같은 코드를 뇌수술로 분리해 보겠습니다.

❌ 1단계: 몸통(UI)과 뇌(Logic)가 융합된 끔찍한 괴물 원본

// 뇌와 얼굴이 한 덩어리로 유착된 컴포넌트 (디자인 변경 불가!)
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)

영호 프론트 외과 전문의의 집도 아래, UI 코드를 단 한 줄도 남기지 않고 순수 함수/상태 배열 객체만 뱉어내는 훅으로 마개조합니다.

// 🎯 Headless Hook: 오직 기능(타이머)과 상태(남은 초)만 관리하는 순수 뇌
export function useCowndownTimer(initialSeconds) {
  const [timeLeft, setTimeLeft] = useState(initialSeconds);
  const isDanger = timeLeft <= 5;
 
  // setInterval 로직 (아까랑 같음)
  useEffect(() => { ... }, []);
 
  const resetTimer = () => setTimeLeft(initialSeconds);
 
  // 💥 UI(div, span)는 단 하나도 리턴하지 않는다! 
  // 그저 계산된 '결과 데이터'와 '조종용 리모컨 함수' 바구니만 던진다.
  return {
    timeLeft,
    isDanger,
    resetTimer
  };
}

✅ 3단계: 디자이너 마음대로 빙의(스킨 입히기) 결합 시간

이제 프론트는 디자이너가 온갖 요구를 던져도 무쌍을 찍습니다. useCountdownTimer라는 무형의 영혼(뇌)을 불러와서 각기 다른 이쁜 육체(UI)에 빙의시켜버리면 끝입니다!

// 빙의 몸체 1: 관리자용 촌스러운 텍스트 UI
function AdminTextTimer() {
  // 무형의 뇌를 호출하여 이 방에 강림시킴
  const { timeLeft, resetTimer } = useCowndownTimer(60); 
  
  return (
    <div>
      <p>[관리자 경고] 세션 만료까지 {timeLeft}s 남음.</p>
      <button onClick={resetTimer}>연장하기</button>
    </div>
  );
}
 
// 빙의 몸체 2: 영숙 디자이너가 빡세게 요구한 예쁜 알록달록 버블 UI
function MagicBubbleTimer() {
  // 똑같은 무형의 뇌를 호출! 로직 중복 코드 작성 0줄!
  const { timeLeft, isDanger, resetTimer } = useCowndownTimer(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 같은 프롭스 지옥을 파면서 컴포넌트를 조종하려던(IoC 실패) 과거와는 180도 다릅니다. 이 헤드리스 훅은 그 어떠한 미래의 새로운 디자인에도 완벽히 면역(Immune)된 영생의 코드가 되었습니다.

🌟 (심화 보너스) 속성 주입기(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>}
    </>
  );
}

이게 왜 쩌는가?: 껍데기를 빚는 사람은 화려한 껍데기 CSS 디자인에만 몰두하면 됩니다. 내부적으로 시각장애인용 접근성 코드를 넣거나 키보드 이스케이프 지원 이벤트 등(ARIA 태그, onKeyDown)은 뇌 컴포넌트(Hook 설계자)가 getButtonProps 안에 쓱싹 숨겨놓고 세팅을 다 해놨으니까요! 역할 구분이 극치에 다다릅니다.

🏁 이번에 배운 내용 총정리

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

🐣 영철이의 퇴근 일기

디자인 바뀔 때마다 쇳덩이 로봇 외피만 하염없이 갈아치우던 나날들이 떠오른다. 뇌랑 살점을 완전히 격리하는 뇌수술 비유는 진짜 역대급이었다.

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

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

📝 마무리 퀴즈

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

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

✅ 정답: B

💡 상세 해설: 찰떡같은 설명입니다! useWindowSize를 만약 컴포넌트 <WindowSizeReporter> 라고 짜서 어딘가에 마운트시키고 거기서부터 요상한 프롭스 드릴링으로 크기 값을 뿌려줘야 했다면 끔찍했겠죠. 그냥 뇌(기능 모듈 로직 묶음)로 짜버리고 그 결과 데이터 객체({ width, height })만 허공에 뿌려두면, 어떤 미친 디자인의 컴포넌트든 그 뇌를 장착(useWindowSize())하여 그 숫자 리모컨을 받아 자기가 쓸 데 편하게 쓸 수 있습니다. 극강의 종속성 탈출(Decoupling)입니다.

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 체계가 다른 모바일(App) React Native 환경으로 진출할 때도, 심지어 모바일용 UI 컴포넌트 라이브러리가 통째로 바뀌더라도 이 '뇌 로직 파일'만큼은 단 한 글자 깎임 없이 그대로 100% 임포트해서 뇌수술로 박아 쓸 수 있는 범우주적 공통 코어가 됩니다.
2. 테스트 고도화의 쉬움: UI(버튼 색상 깔리고 애니메이션 돌고..)를 테스트하려면 복잡한 테스팅 도구가 필요하지만, Headless Hook은 본질이 순수 로직이므로 (값을 넣어주면 다음 달 데이터를 잘 뱉는지) 단위 테스트(Unit Test)를 짜기가 백만 배는 쉽고 빠릅니다. UI 병목 없는 순수 코어의 탄생입니다!