React 공부하기 2. 엘리먼트

모든 리액트에 대한 정보는 공식 문서와 "소플의 처음 만난 리액트"를 공부하고 작성한 내용입니다.

---

프론트엔드 개발자라면 꼭 필요한 React

 

Elements are the smallest building blocks of React apps.

위 문장을 번역하면 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들이라는 의미가 된다.

 

이처럼 엘리먼트는 웹사이트에 대한 모든 정보를 담고 있는 객체인 (DOM)에서 사용하는 용어이다.

 

엘리먼트 렌더링 하기

 

엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서 렌더링 이라는 과정을 거친다.

<div id="root"></div>

 

<div> 태그안에 리액트 엘리먼트들이 렌더링 되며 이를 React DOM  node라고 부른다.

const element = <h1>안녕, 리액트!</h1>
React.DOM.render(element, document.getElementById('root'));

React 엘리먼트를 root DOM 노드에 렌더링 하려면 둘 다 React.Dom.render()로 전달하면 된다.

리액트의 엘리먼트는 리액트의 Virtual DOM에 존재하는 것이고, HTML 엘리먼트는 실제 브라우저에 DOM에 존재하는 것.

따라서, 리액트의 엘리먼트가 렌더링 되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정이라고 할 수 있다.

 

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

 

엘리먼트는 한 번 생성되면 바꿀 수 없기 때문에 엘리먼트를 업데이트 하기 위해서는 다시 생성해야한다.

또한, 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성해서 바꿔치기 하는 것이다.