[Today I Learned] 모달 커스텀 훅 사용법

파일명은 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}
        />
      )}