앨리먼트란?

앨리먼트란?

앨리먼트의 정의

• 리액트 앱의 가장 작은 빌딩 블록
• 화면에 나타내는 내용을 기술하는 자바스크립트 객체
• 리액트 앨리먼트는 DOM 앨리먼트의 가상 표현

생김새와 특징

• 자바스크립트의 객체 형태로 존재
• 컴포넌트 유형, 속성, 내부 자식에 대한 정보를 포함
• 불변성을 지니고 있음
• 생성 후에는 자식이나 속성 변경 불가

엘리먼트 렌더링

• 렌더링을 위해 ReactDOM의 render()라는 함수를 사용
• 렌더링 : 리액트의 가상 DOM → 브라우저의 실제 DOM

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

• 엘리먼트는 한 번 생성되면 바꿀 수 없기 때문에, 이를 업데이트 하려면 다시 새로 생성해야 함.
• 새로운 앨리먼트를 생성한 후 바꿔치기하면 됨.

앨리먼트의 예시

시계를 띄워주는 Clock 함수이다.

import React from "react";

function Clock(props) {
    return (
        <div>
            <h1>안녕, 리액트!</h1>
            <h2>현재 시간 : {new Date().toLocaleTimeString()}</h2>
        </div>
    );
}

export default Clock;

여기서 return 안에 있는 html + javascript 코드가 바로 앨리먼트다.

자바스크립트는 이 앨리먼트를 가상 DOM 트리으로 바꾸고, 이걸 실제 브라우저의 DOM으로 바꾸게 된다.