Hooks Pattern (useToggle)

#14BehavioralEasy

Hooks Pattern (useToggle)

Hooks Pattern

불리언 토글 로직을 재사용 가능한 커스텀 훅 useToggle로 추출하세요.

시그니처

function useToggle(initial?: boolean): readonly [
  boolean,
  () => void,
  (next: boolean) => void
];

반환 튜플 순서: [on, toggle, setOn]

사용 예시

function Demo() {
  const [on, toggle] = useToggle(false);
  return <button onClick={toggle}>{on ? 'on' : 'off'}</button>;
}

학습 포인트

컴포넌트 안의 상태 로직을 훅으로 추출해 재사용
useState + useCallback으로 안정적인 함수 참조 유지 (선택)
TypeScript 튜플 반환 타입 (as const)

import { useState } from 'react';

export function useToggle(initial: boolean = false) {
  // TODO: useState로 on 상태를 만드세요
  // TODO: toggle은 on을 반전시키는 함수
  // TODO: setOn은 직접 boolean을 받는 setter
  // 반환 순서: [on, toggle, setOn]
  return [false, () => {}, (_: boolean) => {}] as const;
}

Open Sandbox

Sandpack 로드 중…

import { useState } from 'react';

export function useToggle(initial: boolean = false) {
  // TODO: useState로 on 상태를 만드세요
  // TODO: toggle은 on을 반전시키는 함수
  // TODO: setOn은 직접 boolean을 받는 setter
  // 반환 순서: [on, toggle, setOn]
  return [false, () => {}, (_: boolean) => {}] as const;
}

Open Sandbox