useToggleContents 기본값 설정 및 조건부 사용법

현재 useToggleContents 훅은 사용되는 곳이 3군데가 있다.

1. 툴팁이 5초 뒤에 사라지는 부분
2. 밸런스 게임 진행 중 5초 뒤에 메인 텍스트가 카운트다운 시계로 바뀌는 곳
3. 버튼 클릭 시 컴포넌트가 바뀌는 곳

3번째의 경우에는 버튼 클릭만 하면 toggle 함수를 통해 두 개의 컴포넌트를 번갈아가면서 보여줄 수 있도록 토글해주면 되므로, duration 값이 필요 없기 때문에 useDuration이라는 boolean 값을 하나 추가해주었다.

우선 기본 값들은 아래와 같이 설정해주었다.

initialStatus?: boolean = true;
duration?: number = 5000;
useDuration?: boolean = true;

3군데 중 1, 2번째가 모두 true, 5000, true를 기본값으로 가지고 있기 때문에 이를 기준으로 기본값을 설정해주었다.

3번째 토글하는 부분에 있어서는, duration 값은 따로 설정해줄 필요 없이 그냥 useDuration를 false로 설정하면 알아서 duration이 유효하지 않도록 미리 if 문에서 걸러지도록 구현했다.

이때 유의해야할 점은 아래와 같이 기본 값을 빈 객체로 설정해주어야 하는데, 그렇지 않으면 그냥 아무런 Props 없이 useToggleContents 훅을 사용했을 경우 오류가 발생한다.

왜 ={}가 필요한가?

만약 ={}를 지정하지 않고 함수를 호출할 때 매개변수를 전달하지 않으면, 함수가 undefined를 받게 된다. 그리고 undefined는 객체가 아니므로, 구조 분해 할당에 실패하게 된다.

UseToggleContentsProps = {}

따라서 위와 같이 = {} 를 통해 전체 객체의 기본값을 빈 객체로 설정하게 되면, 본 훅을 사용할 때 인자를 주지 않아도 기본값으로 동작할 수 있도록 해준다.

import { useCallback, useEffect, useState } from "react";

interface UseToggleContentsProps {
    initialStatus?: boolean;
    duration?: number;
    useDuration?: boolean;
}

export default function useToggleContents({
    initialStatus = true,
    duration = 5000,
    useDuration = true,
}: UseToggleContentsProps = {}) {
    const [toggleContents, setToggleContents] = useState(initialStatus);

    const toggle = useCallback(() => {
        setToggleContents((prev) => !prev);
    }, []);

    useEffect(() => {
        if (useDuration) {
            const timer = setTimeout(() => {
                toggle();
            }, duration);

            return () => clearTimeout(timer);
        }
    }, [useDuration, duration, toggle]);

    return { toggleContents, toggle };
}

따라서 1, 2번째에서는 다음과 같이 사용해주면 알아서 5초에 맞게 알아서 toggleContents가 true에서 false로 값이 바뀌면서 원하는 기능을 수행할 수 있다.

const { toggleContents } = useToggleContents();

3번째에서는 toggle을 추가로 호출해주고, useDuration 값도 추가로 false 처리해주어, duration 값에 맞춰 자동으로 토글되지 않도록 설정해주었다. 이로써 각각의 컴포넌트 내부에서 특정 버튼을 클릭할 때 toggle 함수가 호출되어 두 개의 컴포넌트가 계속 토글되도록 처리할 수 있다.

const { toggleContents, toggle } = useToggleContents({ useDuration: false });

{toggleContents ? (
    <SelectedCardDescription onClick={toggle} />
) : (
    <SelectedCardCurrentRatio onClick={toggle} />
)}