Toggle_커스텀훅만들기

프로젝트에 반복해서 사용되는 토글이 많아 커스텀 훅을 만들어 사용하기로 하였다.
먼저 커스텀 훅임을 명시적으로 확인하기 쉽도록 use를 붙여 useToggle.ts파일을 만들어주었다.

useToogle.ts

import { useState, useCallback } from 'react';

function useToggle(initialValue: boolean = false): [boolean, () => void] {
  const [toggle, setToggle] = useState(initialValue);

  const toggleHandler = useCallback(() => {
    setToggle((prevValue) => !prevValue);
  }, []);

  return [toggle, toggleHandler];
}

export default useToggle;

사용

 const [toggleInput, setToggleInput] = useToggle();

 {toggleInput && ~~~