React 주요 개념 엘리먼트 렌더링

엘리먼트란 React의 가장 작은 단위로 html 태그의 시작 태그와 종료 태그 까지를 엘리먼트라고 합니다..

<a>      // 시작 태그
</a>     // 종료 태그
<br/>    // 빈 태그

<a href="#">a tag</a> // 엘리먼트
<br/>                 // 엘리먼트

<br/> 같은 경우는 빈 요소(empty element)라고 하며 내용이 없는 경우를 말한다. ex) <img/>, <input/>

 

브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다.

React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다.

---

DOM에 엘리먼트 렌더링

보편적으로 react 엘리먼트를 랜더링 할 때 ReactDOM으로 관리하며 이것을 루트 DOM 노드라고 합니다..

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. 

 

React 엘리먼트를 루트 DOM 노드에 랜더링하려면 둘 다 ReactDOM에 전달하면 됩니다.

const elem = <a href="#">a tag</a>;  // react 엘리먼트
ReactDOM.render(elem, document.getElementById('root')  // ReactDOM에 elem과 루트 DOM 노드를 전달

 

렌더링 된 엘리먼트 업데이트

React 엘리먼트는 불변 객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다.

그러나 변경할 수 있는 방법이 아예 없는 것은 아닙니다. UI를 변경할 수 있는 유일한 방법은 변경하고 싶은 엘리먼트를 다시 생성하고 ReactDOM으로 전달하는 것입니다.

function click() {
    let clickElement = <div>클릭 완료</div>  // 변경할 react 엘리먼트 생성
    ReactDOM.render(clickElement, document.getElementById('root')  // ReactDOM에 변경할 elem과 루트 DOM 노드를 전달
}

const elem = <button onClick={() => click()}>a tag</button>;  // react 엘리먼트
ReactDOM.render(elem, document.getElementById('root')  // ReactDOM에 elem과 루트 DOM 노드를 전달