[React] Elements 란?

1. Elements 란?

- 리액트 앱을 구성하는 가장 작은 블록들

- React Elements는 Dom Elements의 가상표현이라 이해하면 편합니다.

- 화면에서 보이는 것을 기술

 

2. Elements의 생김새

- 리액드 Elements는 자바스크립트 객체 형태로 존재

{
    type: 'button',
    props: {
        className: 'bg-green',
        children: {
            type: 'b',
            props: {
                children: 'Hello, element!'
            }
        }
    }
}

 

3. Elements 특징

- 불변성 : Elements 생성후에는 children이나 attributes를 바꿀 수 없다.

 

4. Elements 렌더링

- render 함수를 활용

const element = <h1>Hi React!</h1>;
ReactDom.render(element, document.getElementById('root'));

 

* 한번 생성된 element를 업데이트하려면? => 다시 생성해야함!

function tick(){
    const element = (
        <div>
            <h1>Hi, react! </h1>
            <h2>Current time: {new Date().toLocaleTimeString()}</h2>
        </div>
    );
    
    ReactDom.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);