1관문. Headless UI Pattern

관문 1 / 7

UI 없이 토글 로직만 제공하는 useToggle 훅을 만들어 두 가지 다른 디자인에 적용하라.

📖 이론 비급

Headless UI: 로직과 UI의 완전한 분리

헤드리스 훅은 상태 로직만 제공하고 렌더링은 소비자에게 맡긴다. 동일한 로직을 완전히 다른 디자인으로 구현할 수 있어 재사용성이 극대화된다.

useToggle은 [value, toggle, setTrue, setFalse]를 반환한다. 라이브러리 없이도 headless 컴포넌트 패턴을 구현할 수 있다.

⚔️ 수련 코드

import { useState, useCallback } from 'react';

// TODO: useToggle 훅을 구현하라
// 반환: [value, toggle, setTrue, setFalse]
function useToggle(initialValue = false) {
}

export default function App() {
  const [isOpen, toggle] = useToggle(false);
  const [isDark, , setDark, setLight] = useToggle(false);

  return (
    <div>
      {/* 같은 로직, 다른 UI */}
      <button onClick={toggle}>{isOpen ? '닫기' : '열기'}</button>
      {isOpen && <p>내용이 열렸습니다</p>}

      <div style={{ background: isDark ? '#333' : '#fff', color: isDark ? '#fff' : '#333', padding: 8 }}>
        <button onClick={setDark}>다크</button>
        <button onClick={setLight}>라이트</button>
      </div>
    </div>
  );
}

Open Sandbox