[React] Target container is not a DOM element

Uncaught Error: Target container is not a DOM element.

Target container is not a DOM element

로그

Uncaught Error: Target container is not a DOM element.
    at Object.render (react-dom.development.js:24963)
    at simple1.js:27

발생 원인

• DOM 에 렌더링 시 render 하고자 하는 element 를 찾을 수 없어서 발생

  // js 파일에서 root1 이라는 아이디를 가진 element 에
  const domContainer = document.getElementById('root1');
  // Container 라는 컴포넌트를 domContainer 에 렌더링 하겠다. 인데..
  ReactDOM.render(React.createElement(Container), domContainer);
  
  // html 파일에는 root3 이라는 아이디를 가진 element 밖에 없고,
  // root1 이라는 아이디를 가진 element 가 없어서 발생
  <div id="root3"></div>
  

해결 방법

• js 파일에서 가져오고자 하는 element 의 id 와 렌더링 될 element 의 id 를 맞춰주면 됨

  // root1 이라는 element 를 가져옴
  const domContainer = document.getElementById('root1');
  ReactDOM.render(React.createElement(Container), domContainer);
  
  // root1 이라는 element 만들어 둠
  <div id="root1"></div>