React가 지원되지 않는 UI 라이브러리에서도 구성 요소로 그리기

결론
React Portals를 사용합니다.
배경.
지도를 그리는 데 사용되는 프로그램 라이브러리OpenLayers가 있습니다.
캔버스에서 그림과 도형을 그릴 수 있지만, 캔버스에서 Element을 그릴 수 있는 Overlay 기능이 있습니다.
다만, 오픈라이어스는 리액트를 지원하지 않기 때문에 일반적으로 설치하면 document.createElement() 등으로 일레멘트를 제작할 수 있다.
그래서 저는 React의portals라는 기능을 사용해서 구성 요소로 묘사할 수 있는지 고려했습니다.
Portals는
포털(portal)은 부모 구성 요소 DOM 층 밖의 DOM 노드에 서브 구성 요소를 렌더링하는 공식 메커니즘을 제공합니다.
중요한 것은 ReactElement으로 어떤 Element을 그릴 수 있는 수단 중의 하나이다.
포탈은 어디서든 일레ment를 그릴 수 있기 때문에 대화 상자나 모드 등 맨 앞에 나타나고 싶은 일레ment를 그리는 데 자주 사용된다.
사용법
Portals는 이렇게 사용됩니다.

ReactDOM.createPortal(child, container)

child는 React의 Element이고, container는 실제 Element이다.
예를 들어 외부 프로그램 라이브러리에 container id가 있는 Element을 그렸다고 가정합니다.
Modal 어셈블리를 Element의 하위 요소로 그릴 때는 다음과 같습니다.

import React, { FC } from "react";
import ReactDOM from "react-dom";
import Modal from "./modal";

const Main: FC = () => {
  const element = document.getElementById("container");
  if (!element) {
    return null;
  }
  return ReactDOM.createPortal(<Modal />, element);
};

const App: FC = () => {
  return <Main />;
};

ReactDOM.render(<App />, document.getElementById("root"));

이 경우 실제 어디에 그리든container 가상 DOM에서 App&Main&Modal 순으로 트리를 완성합니다.
(이것은 React Developer Tools에서 확인할 수 있다)
이렇게 하면 Element만 가져오면 Portals를 통해 구성 요소에 그릴 수 있습니다.
ReactDOM.렌더랑 달라요.
리액트덤 하면 이런 형태를 자주 볼 수 있을 것 같다.

ReactDOM.render(<App />, document.getElementById("root"))

render도 같은 Element에 대해 React Element으로 묘사할 수 있는 수단 중의 하나이다.
이 두 가지 차이는 React의 가상 DOM에 나타난다.
예를 들어, 방금 container는 ReactDOM입니다.렌더기에 그립니다.

import React, { FC, useEffect } from "react";
import ReactDOM from "react-dom";
import Modal from "./modal";

const Main: FC = () => {
  useEffect(() => {
    const element = document.getElementById("container");
    ReactDOM.render(<Modal />, element)
  }, []);

  return null;
};

const App: FC = () => {
  return <Main />;
};

ReactDOM.render(<App />, document.getElementById("root"));

render와 createPortal을 사용할 때의 비교는 다음과 같습니다.

어떤 것을 사용하든 실제 DOM은 변하지 않지만 렌더를 사용하면 가상 DOM에서 앱과 컨테이너의 트리가 분리된다.
Portals를 사용하면 React에서 Main의 하위 요소가 container인 것처럼 보입니다.
따라서 App에서 Context와 Redux의 Provider를 사용할 때 Modal에서도 사용할 수 있다.
또한 일반적인 React 애플리케이션에서는 render 를 한 번만 사용합니다.마운트 해제 처리도 수동으로 처리해야 하기 때문에 불편하다.
OpenLayers에서 Portals 사용
어셈블리를 사용하여 OpenLayersOverlay를 그릴 때는 다음과 같습니다.
(OpenLayers 사양에 대한 설명 생략)

import "ol/ol.css";
import React, { FC, useEffect } from "react";
import ReactDOM from "react-dom";
import OlMap from "ol/Map";
import Overlay from "ol/Overlay";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

const mapId = "map";

const layer = new TileLayer({
  source: new OSM(),
});

const map = new OlMap({
  layers: [layer],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

const popup = new Overlay({
  element: document.createElement("div"),
});
map.addOverlay(popup);

map.on("click", (evt) => {
  const coordinate = evt.coordinate;
  popup.setPosition(coordinate);
});

const Popup: FC = () => {
  return (
    <div>Popup</div>
  );
};

export const Main: FC = () => {
  const popupElement = popup.getElement();

  useEffect(() => {
    map.setTarget(mapId);
  }, []);

  return (
    <div id={mapId}>
      {popupElement && ReactDOM.createPortal(<Popup />, popupElement)}
    </div>
  );
};

이 경우 popupElement OpenLayers (즉 React 이외) 에서 렌더링됩니다.
그러나 React는 OpenLayers와 렌더링 시스템이 다르므로 주의해야 합니다.
위에서 설명한 대로 Map을 그리는 Element을 React에서 그린 후map.setTarget Map의 그리기 대상을 지정합니다.
끝말
포탈스를 사용했다는 기사가 많았지만, 이처럼 리액트를 지원하지 않는 UI 라이브러리와 조합해 사용하는 방법을 보지 못해 기사로 썼다.
원래 나는 React가 지원되지 않는 UI 프로그램 라이브러리를 사용하는 것을 추천하지 않지만, 사용하려면 원래의 JS를 사용해서 DOM 작업을 하는 것보다 더 많이 사용해야 한다.