표시/숨김 상태를 다루는 useToggle 훅

제작 과정

한 줄 요약

useState(false) + 반전 로직을 매번 새로 쓰는 대신, [on, toggle, set] 한 줄로 끝내는 훅입니다.

이럴 때 필요해요

모달, 드롭다운, 다크모드, "더 보기" 같은 켜고/끄는 상태는 어디에나 있습니다. 매번 setOpen(v = !v)를 손으로 쓰면 실수도 나고 의도도 흐려집니다. toggle과 set을 분리해 두면 "반전"과 "특정 값으로 지정"이 코드에서 명확히 드러납니다.

어떻게 동작하나

내부 useState로 boolean을 들고, toggle은 함수형 업데이트로 항상 최신값을 반전합니다.
set(v)로 명시적 지정도 제공합니다(닫기 버튼은 set(false)).
두 함수를 useCallback으로 감싸 참조가 안정적이라 depsmemo에 안전합니다.

놓치기 쉬운 것

toggle은 반드시 함수형 업데이트(v = !v)여야 연속 호출에서 안 꼬입니다.
"닫기"는 toggle이 아니라 set(false) 상태와 무관하게 항상 닫혀야 하니까요.

이런 곳에 써요

모달드롭다운아코디언 open 상태
다크모드 스위치, 비밀번호 표시 토글

import type { Metadata } from "next"; import { UseToggleDemo } from "./-components/UseToggleDemo"; export const metadata: Metadata = { title: "useToggle — boolean 토글 훅 (데모)", description: "boolean 상태를 toggle(반전) / set(명시적 지정)으로 다루는 useToggle 훅. 모달·다크모드·아코디언 등 표시 토글에 표준.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-white"> <UseToggleDemo /> </main> ); }