왜 이런 일이 발생했을까?

function OrderDetailModalButton({ order }: Props) {
  const { isModalOpen, openModal, closeModal, modalKey } = useModal();

  if (!isModalOpen) {
    return <RightIcon onClick={openModal} />;
  }

  return createPortal(
    <>
      <ModalOverlay onClick={closeModal} />
      <ModalContainer>
        <OrderModalHeaderContents onClose={closeModal} order={order} />
        <OrderModalMainContents order={order} />
        <OrderModalFooterContents orderStatus={order.status} id={order.id} />
      </ModalContainer>
    </>,
    document.getElementById(modalKey) as HTMLElement,
  );
}

export default OrderDetailModalButton;

function useModal() {
  const modalKey = 'modal-root';
  const [isModalOpen, setModalOpen] = useState(false);

  const openModal = () => {
    setModalOpen(true);
    // 모달창 open 시 배경 스크롤 금지 코드
    document.body.style.overflow = 'hidden';
  };

  const closeModal = () => {
    setModalOpen(false);
    // 모달창 open 시 배경 스크롤 금지 해제 코드
    document.body.style.overflow = 'auto';
  };

  return { isModalOpen, openModal, closeModal, modalKey };
}

export default useModal;

모달을 트리거하는 범위를 확장시켜 주세요

 

function OrderCard({ order }: OrderCardProps) {
  // 주문 카드 컴포넌트에서 useModal을 통한 모달 상태관리
  const { isModalOpen, openModal, closeModal } = useModal();
  
  // OrderInfoContainer(확장된 영역) 클릭 시 모달 오픈
  const orderInfoClickHandler = () => {
    openModal();
  };

  return (
    <>
      <CardContainer>
          <OrderInfoContainer onClick={orderInfoClickHandler}>
	          {. . .}
            {/* OrderDetailModalButton -> OrderDetailModal로 이름 변경 */}
            <OrderDetailModal order={order} isModalOpen={isModalOpen} closeModal={closeModal} />
	          {. . .}
          </OrderInfoContainer>
          {. . .}
      </CardContainer>
    </>
  );
}

버블링이 원인?!

createPortal로 버블링이 안생기는 구조가 아닌가??

function OrderDetailModal({ order, isModalOpen, closeModal }: Props) {
// . . . 

  return createPortal(
    <>
      <ModalOverlay onClick={closeModal} />
      <ModalContainer>
        { . . . }
      </ModalContainer>
    </>,
    document.getElementById(modalKey) as HTMLElement,
  );
}

export default OrderDetailModal;

React에서는 컴포넌트 트리 기준으로 생각해야한다.

해결!

방법1

  // 모달이 닫혀있는 상태에만 모달 오픈
  const orderInfoClickHandler = () => {
    if(!isModalOpen) openModal();
  };

방법2

function OrderCard({ order }: OrderCardProps) {

  return (
    <>
      <CardContainer>
          <OrderInfoContainer onClick={orderInfoClickHandler}>
	          {. . .}
          </OrderInfoContainer>
          {/* 컴포넌트 구조 상 더이상 자식이 아니므로 OrderInfoContainer에 대한 버블링 안생김 */}
          <OrderDetailModal order={order} isModalOpen={isModalOpen} closeModal={closeModal} />
          {. . .}
      </CardContainer>
    </>
  );
}

방법3

function OrderDetailModal({ order, isModalOpen, closeModal }: Props) {
  const { modalKey } = useModal();

  if (!isModalOpen) {
    return null;
  }

  const closeModalHandler = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    closeModal();
  };

  return createPortal(
    <>
      <ModalOverlay onClick={closeModalHandler} />
      <ModalContainer>
        <OrderModalHeaderContents onClose={closeModalHandler} order={order} />
        <OrderModalMainContents order={order} />
        <OrderModalFooterContents orderStatus={order.status} id={order.id} closeModal={closeModal} />
      </ModalContainer>
    </>,
    document.getElementById(modalKey) as HTMLElement,
  );
}

hmos.dev

hmos.dev

React의 이벤트 전파는 Javascript와 다르다

TISTORY🌐 한눈에 이해하는 이벤트 흐름 제어 (버블링 & 캡처링)

🌐 한눈에 이해하는 이벤트 흐름 제어 (버블링 & 캡처링)

HTML 이벤트의 흐름 HTML 문서의 각 엘리먼트들은 아래와 같이 태그 안의 태그가 위치하는 식으로 계층적으로 이루어짐을 볼 수 있다. 이러한 계층적 구조 특징 때문에 만일 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 일어나게 된다. 예를들어 아래 3개가 중첩된 박스 영역에서 가장 자신 엘리먼트인 p 박스를 클릭하면 onclick 이벤트 스크립트가 p 뿐만 아니라 그의 부모인 div와 form 엘리먼트도 발생함을 볼 수 있다. FORM DIV P See the Pen event bubbleing 1 by barzz12 (@inpaSkyrim) on CodePen. 이러한 현상을 이벤트 전파(Event Propagation)라 부르며, 전파 방향에 따라 버블링과 캡처링으로 구분한다. 버블링..

TISTORY