🌃 모달

😸 모달 사용 방법 및 예시

클릭 시 닫히는 모달 제작

• useModal 훅

import {
  Dispatch,
  MutableRefObject,
  SetStateAction,
  useCallback,
  useEffect,
  useRef,
  useState,
} from "react";

const useModal = (): [
  MutableRefObject<HTMLElement | null>,
  boolean,
  Dispatch<SetStateAction<boolean>>
] => {
  const modalRef = useRef<null | HTMLElement>(null);
  const [isOpen, setIsOpen] = useState(false);

  // 2022/05/01 - 클릭 시 모달 닫기 이벤트 - by 1-blue
  const handleCloseModal = useCallback(() => {
    if (isOpen) setIsOpen(false);
  }, [isOpen]);

  // 2022/05/01 - 모달 닫기 이벤트 등록 - by 1-blue
  useEffect(() => {
    setTimeout(() => window.addEventListener("click", handleCloseModal), 0);
    return () => window.removeEventListener("click", handleCloseModal);
  }, [handleCloseModal]);

  return [modalRef, isOpen, setIsOpen];
};

export default useModal;

• Modal 컴포넌트

import { forwardRef, useEffect } from "react";

// util
import { combineClassNames } from "@src/libs/util";

type Props = {
  children: React.ReactChild;
  className?: string;
  noScroll?: boolean;
  primary?: boolean;
};

// eslint-disable-next-line react/display-name
const Modal = forwardRef<HTMLElement, Props>(
  ({ children, className, noScroll, primary }, ref) => {
    // 2022/05/01 - 모달창 open 시 스크롤 금지 - by 1-blue
    useEffect(() => {
      if (!noScroll) return;
      document.body.style.overflow = "hidden";

      return () => {
        document.body.style.overflow = "auto";
      };
    }, [noScroll]);

    return (
      <aside
        className={combineClassNames(
          "z-10",
          primary
            ? "fixed -top-4 left-0 bottom-0 right-0 z-10 bg-black/80 flex justify-center items-center"
            : "",
          className ? className : ""
        )}
        ref={ref}
      >
        {children}
      </aside>
    );
  }
);

export default Modal;

• 사용 예시

// 2022/05/01 - 게시글 삭제 모달 - by 1-blue
const [modalRef, isOpen, setIsOpen] = useModal();

// jsx
{isOpen && (
  <Modal ref={modalRef} noScroll primary>
    <form className="flex flex-col bg-zinc-900 p-8 rounded-md space-y-4 w-[400px]">
      <span className="font-bold text-2xl">포스트 삭제</span>
      <span>정말 포스트를 삭제하시겠습니까?</span>
      <div />
      <div className="text-right space-x-2">
        <button
          type="button"
          className="px-6 py-2 bg-indigo-400 rounded-md hover:bg-indigo-500"
        >
          취소
        </button>
        <button
          type="button"
          className="px-6 py-2 bg-indigo-400 rounded-md hover:bg-indigo-500"
          onClick={() => removePost({})}
        >
          확인
        </button>
      </div>
    </form>
  </Modal>
)}

👇 참고한 사이트

리액트 공식문서 - forwardRef