[React] React 새로운 Root Document 생성하기

React 18.2.0 기준으로 작성 된 글입니다. 

 

필자에 경우 react-force-graph를 사용해서 3D 차트를 구현하던 중 싱글 페이지로 구현이 되어있어 여러개의 차트를 그릴 경우

아래와 같이 타입에러가 발생했습니다.

Cannot read properties of undefined (reading 'children')
TypeError: Cannot read properties of undefined (reading 'children')
    at emptyObject (http://localhost:3000/static/js/bundle.js:663004:14)
    at _objectSpread2.objBindAttr (http://localhost:3000/static/js/bundle.js:663022:5)
    at http://localhost:3000/static/js/bundle.js:650569:5
    at Array.forEach (<anonymous>)
    at viewDigest (http://localhost:3000/static/js/bundle.js:650564:8)
    at threeDigest (http://localhost:3000/static/js/bundle.js:663018:64)
    at Function.update (http://localhost:3000/static/js/bundle.js:663811:7)
    at http://localhost:3000/static/js/bundle.js:654920:16
    at invokeFunc (http://localhost:3000/static/js/bundle.js:658829:19)
    at trailingEdge (http://localhost:3000/static/js/bundle.js:658869:14)

 

그래서 먼저 iframe으로 작업을 진행 했을 때 단순히 보여주는건 잘되었지만 상태공유 및 보안 이슈가 걱정되어 고민 하던 중에 React 새로운 Root Document로 그리는 방법도 있다고 알게되서 작업한 내용을 정리해놓습니다.

 

import React from "react";
import { useEffect, useRef } from "react";
import { ForceGraph3D } from "react-force-graph";

function NewRootDomComponet() {
    const data = {
        nodes: [],
        links: [],
    }

    let newRootDomRef = useRef(null);
    
    const renderNewRootDom = (root) => {
        return root.render(
            <ForceGraph3D 
                graphData={data}
            />
        );
    }
    
    useEffect(() => {
        if (newRootDomRef.current) {
            const root = ReactDOM.createRoot(newRootDomRef.current);
            renderNewRootDom(root);
        }
    }, []);
    
    return (
    	<div ref={newRootDomRef}></div>
    )
}