Custom Modal Hook

useModal

🤜 기존의 Modal Component

👉 modal component선언

import React, { PropsWithChildren } from 'react';
import styled from 'styled-components';

interface ModalDefaultType {
  onClickToggleModal: () => void;
}

function Modal({
  onClickToggleModal,
  children,
}: PropsWithChildren<ModalDefaultType>) {
  return (
    <ModalContainer>
      <DialogBox>{children}</DialogBox>
      <Backdrop
        onClick={(e: React.MouseEvent) => {
          e.preventDefault();

          if (onClickToggleModal) {
            onClickToggleModal();
          }
        }}
      />
    </ModalContainer>
  );
}

const ModalContainer = styled.div`
  width: 300px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
`;

const DialogBox = styled.dialog`
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 30px rgba(30, 30, 30, 0.185);
  box-sizing: border-box;
  background-color: white;
  z-index: 10000;
`;

const Backdrop = styled.div`
  width: 10000px;
  height: 10000px;
  position: fixed;
  top: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.2);
`;

export default Modal;

👉 modal-component 사용

const [isOpenModal, setOpenModal] = useState<boolean>(false);

const onClickToggleModal = useCallback(() => {
    setOpenModal(!isOpenModal);
  }, [isOpenModal]);

...

{isOpenModal && (
            <Modal onClickToggleModal={onClickToggleModal}>
              <div>모달안쪽모씁</div>
            </Modal>
          )}
          <button onClick={onClickToggleModal}>
            <div>모달버튼<div/>
          </button>

👉 기존 modal-component의 문제점

사용할 때마다 사용하는 곳에서 상태를 정의해서 사용해야한다는 불편함도 있고,
모든 모달이 모두 같은 스타일을 가지고 있지 않기 때문에 hook으로 만들어서 사용해야 겠다고 생각했음

🤜 Modal Hook

👉 Modal Hook선언

//useModal.ts
import { useCallback, useState } from 'react';

const useModal = () => {
  const [isOpenModal, setOpenModal] = useState<boolean>(false);

  const handleModal = useCallback(() => {
    setOpenModal(!isOpenModal);
  }, [isOpenModal]);

  return {
    isOpenModal,
    handleModal,
  };
};

export default useModal;

👉 Modal Hook 사용

const { isOpenModal, handleModal } = useModal();
...
{isOpenModal && <div>모달안쪽모씁.</div>}
 <button onClick={handleModal}>버튼</button>

모달을 띄울 때는 상태가 잘 변경이 되었지만, z-index로 구현을 했을 때, 기존 버튼을 누르지 못하기 때문에 상태를 다시 변경시키지 못해서, 닫기를 할 수 없었다.

그래서 모달 내부에 닫기 버튼을 추가해 주었다.

const { isOpenModal, handleModal } = useModal();
...
{isOpenModal && 
(
 <div>
   <button onClick={handleModal}>닫기</button>
   <div>모달 안쪽 모씁</div>
 </div>
 )}
 <button onClick={handleModal}>버튼</button>

모달 내부에서도 handleModal을 통해서 state를 관리해 줬다.

👉 Modal Common Component 만들기

이런식으로 구현했을 때, 매 번 컴포넌트를 만들어서 그에 맞게 props를 전달해 줘야하는 불편함이 있었다. modal의 container component를 만들어서 관리하려고 한다.