React Error Target container is not a DOM element

안녕하세요. 
오늘은 웹 작업을 할때 발생하는 Target container is not a DOM element 에러에 대해서 알아보겠습니다.

리액트를 사용할때, (리액트를 사용하지 않을때도 발생할 수 있습니다.) 
UInvariant Violation: Target container is not a DOM element 가 발생하는 이유는 
DOM(Document Object Model 즉, HTML)이 렌더링 되기 전에 DOM element를 참조할 경우에 발생합니다.

예제코드
아래 예제 코드처럼 javascript 파일을 head에서 불러올 경우
하단에 있는 body 엘리먼트가 읽혀지지 않은 상태에서 javascript 파일이 호출되어 DOM element를 참조할 경우 에러가 발생하게 됩니다.

해결 방법
첫 번째는 간단하게 javascript 파일을 body 하단부에 등록해주는 방법과
두 번째는 javascript의 실행을 DOM이 load 되고 난 이후에 발생하도록 하는 방법이 있습니다.

# 첫 번째 방법

# 두 번째 방법

// 문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트
window.onload = function() {
	// 자바스크립트 실행
}

 
참조
https://stackoverflow.com/questions/26566317/invariant-violation-registercomponent-target-container-is-not-a-dom-elem

 

모두 즐거운 코딩하세요~