React.js - DOM에 Element 랜더링 하는 방법

---

리액트 돔에 엘리먼트 랜더링 하기

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. 이번 시간에는 엘리먼트(element)를 DOM에 랜더링 하는 부분을 알아보겠습니다. 엘리먼트는 리액트에서 애플리케이션을 구성할 때 가장 작은 단위입니다. 이를 통해 화면을 구성하고 완성합니다. 제 블로그에서 학습하시던 분들은 이전 소스에서 이미 계속적으로 엘리먼트를 DOM에 랜더링을 자연스럽게 하고 있었습니다. 

 

● 2. 랜더링 하는 소스를 살펴보겠습니다. 

1번 라인 : 엘리먼트를 작성합니다. 

2번 라인 : 리액트 DOM의 노드에 랜더링 합니다. 

const element = <h1>Hello, react!</h1>;
ReactDOM.render(element,document.getElementById("root"));

 

● 3. 랜더링 된 DIM은 root라는 태그 안에 그려지게 됩니다.

1번 라인 : root라는 ID에 엘리먼트에 그려집니다. 

<div id="root">
<!-- 이 안에 엘리먼트가 그려집니다. -->
</div>​

 

● 4. 해당 소스는 이전에 만든 Hello react 소스를 다시 리뷰하면서 되새기겠습니다.

codepen.io/gocoder-net/pen/NWRowag">

See the Pen Hello, React by GoCoder (@gocoder-net) on CodePen.

 

---

마무리

---

 

엘리먼트를 랜더링 하는 건 리액트의 기본입니다.