리액트의 최소 단위 Element

Element

• 리액트 어플리케이션을 구성하는 가장 작은 블록
• DOM : 웹사이트에 대한 모든 정보를 담고 있는 객체

• 기존에는 element라고 하면 DOM Element를 의미하였다.

• 화면에 나타내는 내용을 기술하는 자바스크립트 객체를 의미하는 Descriptor라는 개념이 처음 등장하였으나 이 객체의 형태가 DOM Element이기에 Element라고 부르기 시작했다.
• 현재는 Virtual DOM이라는 개념이 생겨났기에 element하면 virtual DOM의 Element로 이해하면 된다.

Element 살펴보기

const element = <h1>Hello, world!</h1>;

• 리액트의 JSX에 따라 createElement가 실행되고 이것이 element의 값이 된다.
• element가 렌더링되면 해당 element가 리액트의 엘리먼트가 이것이 실제 돔에 반영된다.

Element 객체의 형태

• 리액트 Elements는 자바스크립트 객체 형태로 존재한다.

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

• 위의 예시는 button 태그의 element를 의미한다.
• html의 테그 뿐만 아니라 컴포넌트 또한 마찬가지로 자바스크립트 객체 형식이 된다.

Elemet의 특징

1. 불변성
   • element는 한번 생성되고 나서는 속성, 자손, 값이 변하지 않는다.
   • 따라서 다른 속성, 값의 element으로 렌더링을 하고 싶다면(화면에 보여주고) 원하는 element를 만들고 나서 이것으로 교체해야 한다.

Element의 렌더링(화면에 표시하기)

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

• 위 코드는 모든 리액트앱에 필수적인 코드이다.

• 이 div 태그 안에 리액트 element들이 렌더링 되고 이것을 root dom node라고 한다.

• root div에 리액트 element를 렌더링하기 위해서는 다음 코드를 사용한다.

  const element = <h1>Hello, world!</h1>;
  ReactDOM.render(element, document.getElementByUd('root'))
  

Element의 업데이트

function tick(){
    const element = (
        <div>
            <h1> 안녕, 리액트!</h1>
            <h2> 현재 시작: {new Date().toLocaleTimeString()}
        </div>

    )
ReactDOM.render(element, document.getElementByUd('root'))
}
setInterval(tick, 1000);

• 위 코드를 실행하면 1초마다 시간이 화면에서 표시될 것이다.
• setInterval()를 호출하여 1000ms마다 tick 함수를 호출해 1초마다 element를 새로 생성하고 있다.
• 이렇게 elements는 불변하기에 새로 렌더링하기 위해서는 매번 element 객체를 교체해주어야 한다.