packagesreacthooksuseBoolean

useBoolean

boolean 상태를 쉽게 관리할 수 있는 Hook입니다. true/false 토글, 강제로 true나 false로 설정하는 기능을 제공합니다.

Props

이름타입설명
initialboolean초기 boolean 상태값

Return

  • value: 현재 boolean 상태값
  • setTrue: 상태를 true로 설정
  • setFalse: 상태를 false로 설정
  • toggle: 현재 상태를 반전 (true ⟷ false)

Usage

import { useBoolean } from '@teamsparta/react';
 
function Example() {
  const { value, setTrue, setFalse, toggle } = useBoolean(false);
 
  return (
    <div>
      <p>현재 상태: {value ? 'ON' : 'OFF'}</p>
      <button onClick={setTrue}>켜기</button>
      <button onClick={setFalse}>끄기</button>
      <button onClick={toggle}>토글</button>
      {value && <div>표시할 내용</div>}
    </div>
  );
}

Example

모달 제어

function Modal() {
  const { value: isOpen, setTrue: open, setFalse: close } = useBoolean(false);
  return (
    <>
      <button onClick={open}>모달 열기</button>
      {isOpen && (
        <div className="modal">
          <h2>모달 내용</h2>
          <button onClick={close}>닫기</button>
        </div>
      )}
    </>
  );
}

로딩 상태 관리

function DataFetcher() {
  const {
    value: isLoading,
    setTrue: startLoading,
    setFalse: stopLoading,
  } = useBoolean(false);
 
  const fetchData = async () => {
    startLoading();
    try {
      await fetch('...');
    } finally {
      stopLoading();
    }
  };
 
  return (
    <div>
      {isLoading ? (
        <LoadingSpinner />
      ) : (
        <button onClick={fetchData}>데이터 가져오기</button>
      )}
    </div>
  );
}
WhenuseClickAway