본문 바로가기
IT_Developers/ReactJS

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

by 고코더 2021. 1. 23.

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


 

안녕하세요.

고코더 입니다.

 

 

 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.

 


마무리


 

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

 

 

댓글0