useToggle custom hook 생성

[sumi-0011]

modal 등을 켰다 끌때, useState 을 많이 사용하게 되는데 그때마다 밑과 같은 코드를 작성하는게 불편하다고 생각했습니다

  const [isResultModalOpen, setIsResultModalOpen] = useState(false);

  const handleResultModalOpen = () => {
    setIsResultModalOpen(true);
  };

  const handleResultModalClose = () => {
    setIsResultModalOpen(false);
  };

그래서 이러한 true->false, false->true 상태를 관리하는 hook을 �만들면 어떨까요?!

useToggle 이 링크를 참고하여 만들어보았습니다.

type ToggleState = boolean;
type ToggleHandler = () => void;

type ToggleOn = () => void;
type ToggleOff = () => void;

type ToggleTools = {
  toggleOn: ToggleOn;
  toggleOff: ToggleOff;
};

const useToggle = (initialState?: boolean): [ToggleState, ToggleHandler, ToggleTools] => {
  const [toggle, setToggle] = useState<boolean>(initialState ?? false);

  const handleToggleClick = useCallback(() => {
    setToggle((prev) => !prev);
  }, []);

  const toggleOn = useCallback(() => {
    setToggle(true);
  }, []);

  const toggleOff = useCallback(() => {
    setToggle(false);
  }, []);

  const tools = useMemo(() => {
    return { toggleOn, toggleOff };
  }, [toggleOff, toggleOn]);

  return [toggle, handleToggleClick, tools];
};

export default useToggle;

• 공통적으로 사용하는 true->false, false->true은 handleToggleClick 메소드를 통해서 제어할 수 있습니다.
• 임으로 true, false로 상태를 바꾸어야할 때는 toggleOn toggleOff 메소드를 통해 제어할 수 있습니다.
• 계속해서 리런데링이 될수 있는 문제를 해결하기 위해 useMemo와 useCallback을 사용하였습니다.
• 리턴 타입을 객체로 한다면, 밑의 두방법으로 해야해서, 일부러 배열로 리턴 타입을 지정하였습니다.
  • 고정된 이름을 사용하거나
  • 이름을 재정의 하거나

사용 방법

const [isResultModalOpen, handleResultModalToggle, { toggleOn: handleResultModalOpen, toggleOff: handleResultModalClose }] = useToggle();

사용 예시

전

후

useToggle hook이 있다면 중복되는 코드를 많이 줄일수 있을것 같아요!
더 추가해야하거나 수정이 필요한 부분이 있다면 자유롭게 의견 남겨주세요 :D
@msdio @coolsmart2

[coolsmart2]

좋습니다. 많이 깔끔해지겠네요

---

궁금한게 있는데 toggleOn, toggleOff을 useCallback를 사용했는데 다시 useMemo를 사용하는 이유가 있나요?

[sumi-0011]

useMemo를 사용하지 않으면, tools은 계속 다시 만들어져서 감싸놓았습니다.
저번에 봤던대로, useMemo를 사용하는게 더 이득일지는 사실 잘 모르겠네요 ... 😂

[sumi-0011]

@msdio 한번 확인 부탁드립니다!

[msdio]

아주 좋은 아이디어 입니다 👍👍

처음에는 아래와 같이 그냥 작성하면 되는거 아닌가? 생각했어요.

const handleModal = () => {
  setModalOpen(prev => !prev);
}

위와 같이 작성하면, 위에 수미님이 고려하신 것과 같은 on, off로 상태를 변경하고 싶을 때에는 if문으로 분기처리하거나, setModalOpen, setModalClose과 같은 별도의 함수를 작성해야 하겠네요.

저희 서비스 특성 상 모달을 보여주어야 하는 경우가 많기 때문에 이런 훅은 보일러 플레이트를 많이 줄일 수 있어 좋은 것 같아요!

단지 뒤에 toggleOn, toggleOff를 옵셔널로 해놓는다면 단순히 on <-> off 로만 변경하고 싶을 때는 더욱 단순하게 훅을 사용할 수 있지 않을까 싶어요 🙂

[sumi-0011]

const [isResultModalOpen, handleResultModalToggle] = useToggle();

이런식으로 사용할수 있으면 좋겠다! 다로 이해했는데 맞을까요? @msdio
현재 이렇게 사용 가능합니다!

[msdio]

아 넵 맞아요! 이 코멘트를 남기고 난 뒤에 pr을 확인했습니다 고생하셨어요 👍