react-dom

Goal : react-dom에 대해 이해하기

 

리액트라는 것은 순수 자바스크립트이고 이 자바스크립트를 이용해서 컴포넌트들을 만들어 나간다. 그리고 실제로 브라우저는 HTML과 CSS, 그리고 순수 자바스크립트만을 이용하고 이해할 수 있는데, 그래서 리액트 컴포넌트와 같은 것들은 결국 바벨(Babel)을 통해서 순수 자바스크립트로 변환이 된다. 그리고 이렇게 변환된 컴포넌트를 HTML과 연결하는 작업을 해 줘야 하는데, 그것을 할 수 있는 것이 react-dom이다.

 

 

react 프로젝트를 실행하고 난 후에 index.html의 초기 코드를 보면 body태그 속에는 div 태그 하나가 달랑 있다. 여기에 id는 root인데, 이 root라는 id를 이용해서 자바스크립트와 연결해 줄 것이다. 또한 그것을 가능하게 하는 것이 react-dom이다. 이제 index.js 라는 파일을 살펴보자.

 

빨간색 박스가 그려져있는 줄을 해석하자면, react-dom이라는 라이브러리에서 ReactDom 클래스를 가져온다(import)는 뜻을 가진다. 6번째 줄을 보면, 가져온 ReactDom 클래스에 있는 렌더 함수를 이용해서 documnet 페이지에 있는 id가 root라는 요소를 가지고 와서 그 요소에 root 컴포넌트를 연결시켜 주고 있다. 

 

따라서 render 함수가 호출이 되면 index.html에 있는 <div id="root"></div> 부분에 우리의 컴포넌트(<App />부분)가 연결이 되는 것이다. 즉, root라는 id를 가진 요소에 우리의 제일 상위에 있는 App이라는 컴포넌트를 연결하는 것이라고 이해할 수 있다. 그리고 이 App이라는 것은 디렉토리에 있는 app.jsx 파일, 즉 컴포넌트를 의미한다. 

 

앱은 현재 hello :)를 출력한다. 

 

그 hello가 연결되어서 이 hello가 결국 div태그에 들어가는 것을 확인해 볼 수 있다.

이렇게 연결해주는 제일 상위의 컴포넌트를 연결해 주는 것이 바로 react-dom이다. 그래서 항상 index.js 파일에서 연결을 해준다.  

 

그리고 우리가 이제 실제로 컴포넌트를 만들어 나갈 때는 App 컴포넌트에서부터 시작하면 된다.