더 이상 isOpen으로 모달을 관리하지 마세요.

export const ModalOpenButton = () => {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <>
      <div className={'btn-wrapper'}>
        <button className={'modal-trigger'} onClick={() => setIsOpen(true)}>
          모달 열기
        </button>
      </div>
      {isOpen && (
        <div className={'modal-container'}>
          <div className={'modal-content'}>
            <p>리액트로 모달 구현하기</p>
            <button className={'modal-close'} onClick={() => setIsOpen(false)}>
              모달 닫기
            </button>
          </div>
        </div>
      )}
    </>
  );
};

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './Modal.css'; // 모달 스타일 시트
 
const Modal = ({ isOpen, children }) => {
  if (!isOpen) return null;
 
  return ReactDOM.createPortal(<div className="modal">{children}</div>, document.getElementById('modal-root'));
};
 
const App = () => {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h1>Modal Title</h1>
        <p>This is a modal content.</p>
        <button onClick={() => setIsOpen(false)}>Close</button>
      </Modal>
    </div>
  );
};
 
export default App;

export const ModalOpenButton = () => {
  const [isOpen, setIsOpen] = useState(false);
 
  // 엄청 긴 비즈니스 로직들
  //
  //
  //
  //
 
  return (
    <>
      {/* 여러가지 컴포넌트들 */}
      <div className={'btn-wrapper'}>
        <button className={'modal-trigger'} onClick={() => setIsOpen(true)}>
          모달 열기
        </button>
      </div>
      {/* 여러가지 컴포넌트들 */}
 
      {/* 여러가지 컴포넌트들 */}
 
      {/* 여러가지 컴포넌트들 */}
 
      {isOpen && (
        <div className={'modal-container'}>
          <div className={'modal-content'}>
            <p>리액트로 모달 구현하기</p>
            <button className={'modal-close'} onClick={() => setIsOpen(false)}>
              모달 닫기
            </button>
          </div>
        </div>
      )}
    </>
  );
};

import { createContext, useContext, useEffect, useMemo, useRef } from 'react';
 
interface OverlayContextValue {
  id?: string;
  mount?: (id: string, overlay: React.ReactNode) => void;
  unmount?: (id: string) => void;
}
 
export const OverlayContext = createContext<OverlayContextValue>({});
 
// Context를 통해 상위에서 마운트 언마운트 함수를 제공한다.
const useOverlayContext = () => {
  const { mount, unmount } = useContext(OverlayContext);
 
  const InvalidContext = !(mount && unmount);
 
  if (InvalidContext) {
    throw new Error('useOverlay는 OverlayProvider 내에서만 사용할 수 있습니다.');
  }
 
  return useMemo(() => ({ mount, unmount }), [mount, unmount]);
};
 
const uniqueId = () => Date.now().toString() + Math.random().toString();
 
const useUniqueIdRef = () => {
  const id = useRef(uniqueId()).current;
  return id;
};
 
// 마운트 언마운트 로직을 오버레이에서 제공한다.
export const useOverlay = ({ isCloseOnUnmount = true }: { isCloseOnUnmount?: boolean } = {}) => {
  const { mount, unmount } = useOverlayContext();
  const id = useUniqueIdRef();
 
  // 부모 컴포넌트와 마운트 상태를 동기화한다면 옵션을 켜두고, 별도로 관리한다면 끈다.
  useEffect(() => {
    return () => {
      if (isCloseOnUnmount) unmount(id);
    };
  }, [id, unmount, isCloseOnUnmount]);
 
  return useMemo(
    () => ({ open: (element: React.ReactNode) => mount(id, element), close: () => unmount(id) }),
    [id, mount, unmount]
  );
};

import { Fragment, useCallback, useMemo, useState } from 'react';
import { OverlayContext } from './useOverlay';
 
export const OverlayProvider = ({ children }: { children: React.ReactNode }) => {
  const [overlays, setOverlays] = useState<Map<string, React.ReactNode>>(new Map());
 
  const mount = useCallback((id: string, overlay: React.ReactNode) => {
    setOverlays((prev) => {
      const cloned = new Map(prev);
      cloned.set(id, overlay);
      return cloned;
    });
  }, []);
 
  const unmount = useCallback((id: string) => {
    setOverlays((prev) => {
      const newMap = new Map(prev);
      newMap.delete(id);
      return newMap;
    });
  }, []);
 
  const value = useMemo(() => ({ mount, unmount }), [mount, unmount]);
 
  return (
    <OverlayContext.Provider value={value}>
      {children}
      {[...overlays.entries()].map(([id, overlay]) => {
        return <Fragment key={id}>{overlay}</Fragment>;
      })}
    </OverlayContext.Provider>
  );
};

export function LotusUpdateButton({ lotusId }: { lotusId: string }) {
  const { open, close } = useOverlay();
 
  const onSubmit = () => {
    // 불필요한 코드는 생략합니다.
  };
 
  const handleOpenUpdateModal = () => {
    open(
      <ModalBox onClose={close}>
        <div className="w-1/2 rounded-lg bg-white p-6">
          <LotusUpdateForm lotusId={lotusId} onSubmit={onSubmit} onCancel={close} />
        </div>
      </ModalBox>
    );
  };
 
  return (
    <Button variant={'default'} onClick={handleOpenUpdateModal}>
      <IoSettingsSharp />
      <Text size="sm">수정하기</Text>
    </Button>
  );
}

export const useToast = ({ isCloseOnUnmount = true }: { isCloseOnUnmount?: boolean } = {}) => {
  const { open, close, exit } = useOverlay({ isCloseOnUnmount });
 
  const toast = ({ ...props }: Partial<ToastProps>) => {
    open(({ isOpen }) => <Toast isOpen={isOpen} close={close} {...props} />);
  };
 
  return { toast, close, exit };
};

function Component() {
  const { toast } = useToast();
 
  toast({
    title: '안녕하세요!',
    description: 'Gist clone과정을 폴짝! 건너뛰고테스트 ⭐️',
    duration: 2000,
    action: <Button>닫기</Button>
  });
 
  return <></>;
}

export interface OverlayControlRef {
  close: () => void;
}
 
export const OverlayController = forwardRef(function OverlayController(
  { overlayElement: OverlayElement, onExit }: Props,
  ref: Ref<OverlayControlRef>
) {
  const [isOpenOverlay, setIsOpenOverlay] = useState(false);
 
  const handleOverlayClose = useCallback(() => setIsOpenOverlay(false), []);
 
  useImperativeHandle(ref, () => {
    return { close: handleOverlayClose };
  }, [handleOverlayClose]);
 
  useEffect(() => {
    // NOTE: requestAnimationFrame이 없으면 가끔 Open 애니메이션이 실행되지 않는다.
    requestAnimationFrame(() => {
      setIsOpenOverlay(true);
    });
  }, []);
 
  return <OverlayElement isOpen={isOpenOverlay} close={handleOverlayClose} exit={onExit} />;
});