React TypeScript 프로퍼티로 SetState가지기

개발하다보니 모달을 껐다 켰다하는 props를 부모에 callback함수를 호출해 제어하기 위해 SetState를 TypeScript Interface로 정의하고 싶은 경우가 생겼다.

그런경우 아래와 같이 코드를 사용하면 된다.

import { Dispatch, SetStateAciton } from "react"

interFace IModal{
    SetShow: Dispatch<SetStateAction<boolean>>;
}

const modal =({SetShow}:IModal): JSX.Element => {
    const onCloseModal = useCallback((): void => {
        SetShow(false);
    });

    return(
        <div>
            modal
        </div>
        <button onClick ={onCloseModal}>
            modal Close
        </button>
    )
}