createRoot(ReactDOM.render)를 컴포넌트에서 호출하면 안되나요?

React
1

안녕하세요 :slight_smile:
외부라이브러리를 사용해서 만들어진 dom element의 자식 엘리먼트로 제가 만든 리액트 컴포넌트를 추가하고 싶은데요…!
React.createElement로 리액트 엘리먼트 만든 다음 ReactDOM.render로 리액트 돔을 수동으로 변경해줬더니

react_devtools_backend.js:3973 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17

위와 같은 오류가 나서요, 18버전에 나온 createRoot()로 변경했더니, 화면상에 제가 원하는대로 나오기는 하는데 아래와 같은 오류가 발생했습니다… 혹시index.tsx가 아닌 중간 컴포넌트에서 render를 실행시키면 안되는걸까요??

You are calling ReactDOM.createRoot() on a container that was previously passed to ReactDOM.render(). This is not supported.

아래는 제 코드입니다!

parentElement.current = document.getElementsByClassName("test-parent-className")[0] as HTMLDivElement;

if (myElement.current) {
  const parentRoot = ReactDOM.createRoot(parentElement.current as HTMLDivElement);
  parentRoot.render(React.createElement("div", {className: "test-child"},
        <div>test child component</div>))
}
...
2

이게 가장 올바른 방법인지는 모르겠으나, ReactDOM.createPortal을 통해 자식 요소를 렌더링 하시면 될 것 같습니다.