[Question] MUI Dialog 컴포넌트가 언마운트되지 않는 것 같습니다.

[KKamjangE]

질문

Material UI로 구현한 Dialog component를 overlay-kit으로 제어하고 있습니다.
Dialog를 unmount하기 위해서 overlay-kit의 unmount 함수를 사용했지만, Dialog를 열면 여전히 닫힌 Dialog의 count가 함께 console에 출력됩니다.
이 현상은 Dialog component가 완전히 unmount되지 않았다는 것을 의미한다고 생각합니다.

예시 코드

Code Sandbox

import { useEffect, useState } from "react";

import { Button, Dialog, DialogContent } from "@mui/material";
import { overlay } from "overlay-kit";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [count, setCount] = useState(0);

  const openDialogA = () => {
    setCount((prev) => prev + 1);
    setIsOpen(true);
  };
  const closeDialogA = () => setIsOpen(false);

  return (
    <div style={{ display: "flex", gap: 10 }}>
      <Button onClick={openDialogA} variant="contained">
        Dialog A Open
      </Button>
      <DialogA isOpen={isOpen} onClose={closeDialogA} count={count} />
      <Button
        variant="contained"
        onClick={() => {
          setCount((prev) => prev + 1);
          overlay.open(({ isOpen, close, unmount }) => (
            <DialogB
              isOpen={isOpen}
              onClose={close}
              onExit={unmount}
              count={count}
            />
          ));
        }}
      >
        Dialog B Open
      </Button>
    </div>
  );
}

interface DialogAProps {
  isOpen: boolean;
  onClose: () => void;
  count: number;
}

// State로 제어
const DialogA = ({ isOpen, onClose, count }: DialogAProps) => {
  console.log("Dialog A Count: ", count);

  return (
    <Dialog open={isOpen} onClose={onClose}>
      <DialogContent>Dialog A</DialogContent>
    </Dialog>
  );
};

interface DialogBProps {
  isOpen: boolean;
  onClose: () => void;
  onExit: () => void;
  count: number;
}

// overlay-kit으로 제어
const DialogB = ({ isOpen, onClose, onExit, count }: DialogBProps) => {
  console.log("Dialog B Count: ", count);

  useEffect(() => {
    return () => onExit();
  }, []);

  return (
    <Dialog open={isOpen} onClose={onClose}>
      <DialogContent>Dialog B</DialogContent>
    </Dialog>
  );
};

기대 결과

Dialog를 open할 때, 이전에 닫힌 Dialog의 count가 console에 출력되지 않아야 합니다.

실행 결과

Dialog를 open할 때, 이미 닫힌 Dialog의 count도 console에 함께 출력됩니다.

[jungpaeng]

overlay-kit의 동작 방식은, overlay.open이 실행될 때 인자로 전달받은 컴포넌트의 스냅샷을 출력합니다. 그리고 setState는 함수 실행 즉시 값이 변경되는 게 아닌, batching을 통해서 변경됩니다.

따라서 'Dialog B Open' 버튼과 같이 setState와 overlay.open이 순차적으로 실행된다면, setState가 실행된 이후 batching되어 값이 적용되기 전에 overlay.open이 실행되므로 이전 count 값이 prop으로 담긴 채 DialogB 컴포넌트가 실행됩니다.

const [count, setCount] = useState(0);

...

setCount(prev => prev + 1);
console.log(count);

이 때, console.log로 count가 1이 아닌 0이 찍히는 것을 생각해보시면 이해가 더욱 쉬울 것입니다.
따라서 unmount 함수를 호출했을 때 컴포넌트가 언마운트가 되지 않는 것이 아니라 스냅샷으로 가져온 이전 state를 컴포넌트에서 바라보고 있다고 생각해주시면 좋을 것 같습니다.

올려주신 code sandbox에 접속해서 바로 'Dialog B Open' 버튼을 눌렀을 때 0이 콘솔에 찍히는 것으로도 확인할 수 있습니다. state가 변경된 이후 오버레이가 열리는 것을 바란다면 useEffect 등을 사용하는 것이 더 나은 선택지일 수 있을 것 같습니다.

[KKamjangE]

React의 배치 업데이트로 count가 증가하기 전에 오버레이가 먼저 열린다는 것은 이해했습니다.
죄송합니다. 질문에 대한 저의 설명이 부족했던 것 같습니다.

바로 이전 상태 값뿐만 아니라, 열고 닫을 때마다 점점 쌓이는 식으로 콘솔에 모든 이전 상태 값이 출력되는 것이 확인되어서 이슈로 등록했습니다.

위 이미지는 B Dialog를 5번째 열었을 때 콘솔에 찍히는 값들입니다.

B Dialog의 useEffect 안에 작성한 console.log는 설명해 주신 것처럼 상태가 업데이트되기 이전의 값인 4만 출력됩니다.
하지만, 컴포넌트가 렌더링 될 때마다 출력되는 console.log는 오버레이를 열었을 때 한 번에 0~4 까지 모든 값이 출력되는 것을 확인할 수 있습니다.

A Dialog의 경우 열었을 때 콘솔에 한 번만 출력되는 것을 확인할 수 있습니다.

제가 궁금했던 것은 어째서 모든 이전 상태 값들이 콘솔에 찍히는 것인지였습니다.

[healtheloper]

문서의 예제 (오버레이 메모리 해제) 처럼 테스트해 보았는데, useState 의 상태값은 정상적으로 초기화되지만, useOverlayData 로 확인한 오버레이 데이터는 그대로 남아 있는 걸로 보아 정상적으로 unmount 가 이루어지지 않는 게 맞는 것 같습니다.

대부분의 UI 라이브러리의 경우 open 상태에 따라 Content 역할을 하는 컴포넌트를 unmount 시키는데, useEffect 의 clean up 을 사용하려면 Content 컴포넌트 내에서 사용해야 문서의 의도대로 동작하는 걸로 보여서 이처럼 예제가 수정되면 좋을 것 같습니다.

export function ConfirmDialog({ isOpen, close, onExit }) {
  return (
    <Dialog open={isOpen} onClose={close} transitionDuration={500}>
      <DialogTitle>정말로 계속하시겠어요?</DialogTitle>
      <ConfirmDialogContent close={close} onExit={onExit} />
    </Dialog>
  );
}

const ConfirmDialogContent = ({ close, onExit }) => {
  const [count, setCount] = useState(0);
  const overlayData = useOverlayData();

  useEffect(() => {
    return () => {
      onExit();
    };
  }, []);

  return (
    <>
      <DialogContent>
        <p>count: {count}</p>
        <p>{Object.keys(overlayData).join(", ")}</p>
        <Button onClick={() => setCount(count + 1)}>카운트 증가</Button>
      </DialogContent>

      <DialogActions>
        <Button onClick={close}>아니요</Button>
        <Button onClick={close}>네</Button>
      </DialogActions>
    </>
  );
};

Codesandbox 에서 확인해보면, ConfirmDialogA 로 생성된 오버레이 데이터는 사라지지않고, ConfirmDialogB 에서 생성된 오버레이 데이터는 지워지는걸 볼 수 있습니다.