useToggle

Toggle function hook

Introduction

이 useToggle 훅은 boolean 타입의 토글 상태를 관리하는 데 사용됩니다. 이 훅을 사용하는 목적은 다음과 같습니다.

1. 간편한 토글 로직 관리: 토글 상태를 직접 관리하는 데 필요한 로직이 상대적으로 간단한 경우, 해당 훅을 사용하여 불필요한 반복적인 코드를 줄일 수 있습니다.

2. 컴포넌트 간의 상태 공유: 여러 컴포넌트 간에 동일한 토글 상태를 공유해야 하는 경우, useToggle 훅을 사용하여 각 컴포넌트가 동일한 상태를 공유하도록 할 수 있습니다.

3. 리덕스와 같은 전역 상태 관리 대안: 간단한 상태 관리에는 리덕스와 같은 라이브러리를 도입하기가 비효율적인 경우가 있습니다. useToggle 훅은 컴포넌트 수준에서 간단한 상태 관리를 제공하여 복잡성을 줄일 수 있습니다.

4. 가독성 및 재사용성: 토글 로직을 하나의 훅으로 추상화하면 코드의 가독성이 향상되며, 유사한 로직을 다른 곳에서도 재사용할 수 있습니다.

토글 상태를 다룰 때 useToggle 훅을 사용하여 코드를 간소화하고, 재사용성을 높이며, 유지보수를 쉽게 할 수 있습니다.

Example

import React from "react";
import useToggle from "./useToggle"; // useToggle 훅을 불러옵니다.
​
function ExampleComponent() {
  // useToggle 훅을 사용하여 초기 상태를 설정합니다.
  const [isToggled, setToggle, toggleHandler] = useToggle();
​
  return (
    <div>
      <p>Current State: {isToggled ? "On" : "Off"}</p>
      <button onClick={toggleHandler}>Toggle</button>
      <button onClick={() => setToggle(true)}>Turn On</button>
      <button onClick={() => setToggle(false)}>Turn Off</button>
    </div>
  );
}
​
export default ExampleComponent;

이 예시 코드에서는 useToggle 훅을 사용하여 상태를 초기화하고, 그 상태를 이용하여 컴포넌트를 렌더링합니다. 버튼 클릭 이벤트를 통해 토글 상태를 변경하거나 직접 On 또는 Off로 설정할 수 있습니다.

Hook

import React from "react";
​
/**
 * 부울 토글 상태를 관리하는 사용자 정의 훅입니다.
 *
 * @param initialState - 토글의 초기 상태 (기본값은 false).
 * @returns {Array} - 현재 상태, 토글 함수, 그리고 토글 핸들러 함수를 담은 튜플을 반환합니다.
 * @example
 * // 사용 예시:
 * const [isToggled, setToggle, toggleHandler] = useToggle();
 */
type InitialStateType = boolean;
​
export default function useToggle(initialState: InitialStateType = false) {
  // 현재 토글 상태를 추적하는 상태
  const [state, toggle] = React.useState<boolean>(initialState);
​
  // 상태를 토글하는 함수
  const handleToggle = () => toggle((prev) => !prev);
​
  // 현재 상태, 토글 함수, 그리고 토글 핸들러 함수를 담은 튜플을 반환
  return [state, toggle, handleToggle] as const;
}
​