파일명은 useModal 이런식으로 작성 해야함.
아래는 커스텀훅 예시이다.
import { useState, useCallback, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const useModal = () => {
const [modal, setModal] = useState(false);
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
const openModal = useCallback(() => {
setModal(true);
}, []);
const closeModal = useCallback(() => {
setModal(false);
}, []);
const closeModalIfClickOutside = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
if (e.target === e.currentTarget) {
closeModal();
}
},
[],
);
const disableScroll = () => {
window.onscroll = () => {
window.scrollTo(scrollLeft, scrollTop);
};
};
const enableScroll = () => {
window.onscroll = () => {};
};
useEffect(() => {
if (modal) {
disableScroll();
}
if (!modal) {
enableScroll();
}
}, [modal]);
useEffect(() => {
return () => {
enableScroll();
};
}, []);
return [modal, openModal, closeModal, closeModalIfClickOutside] as const;
};
export default useModal;
import 로 useModal 커스텀 훅을 불러온다.
그리고 구조분해할당으로 함수들을 가져온다
단. 위에 코드를 보다시피 배열형태로 돼있으므로 순서를 명시해야한다!
const [modal, openModal, closeModal, closeModalIfClickOutside] = useModal();
가져온 함수를 원하는 메서드에서 사용하면 된다.
kakao.maps.event.addListener(marker, 'click', () => {
//모달 생성
const object: InfoType = {
areacode: cityInfo[i].areacode,
engarea: cityInfo[i].engarea,
korarea: cityInfo[i].korarea,
description: cityInfo[i].description,
hashtag: cityInfo[i].hashtag,
tourcount: cityInfo[i].tourcount,
tourdate: cityInfo[i].tourdate,
spec: cityInfo[i].spec,
jpgindex: i + 1,
};
setAreaInfo({ ...object });
openModal();
});
추가로 props로 사용할때도 자주 있는것 같다. 기존 프롭스 내리는거첢 내려주면 된다.
{modal && (
<CityInfoModal
closeModalIfClickOutside={closeModalIfClickOutside}
closeModal={closeModal}
/>
)}