[React] 엘리먼트 렌더링

엘리먼트란?

리액트 엘리먼트는 리액트 앱의 가장 작은 단위이다.

리액트 엘리먼트와 DOM 엘리먼트는 다른 것인데,

DOM 엘리먼트는 실제 브라우저의 존재하는 엘리먼트이고,

리액트는 Virtual DOM 에 존재한다.

그렇기에 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이라고 할 수 있다.

(뭔소리지?)

 

그리고 리액트 엘리먼트가 기술한 내용을 토대로 실제 화면에서 보는 DOM 엘리먼트가 만들어진다.

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

이런 JSX 코드가 실행될 때, 대입연산자는 createElement() 함수를 사용해서 리액트 엘리먼트를 생성하게 된다.

그리고 리액트는 이러한 리액트 엘리먼트를 이용해서 실제 화면에서 보이는 DOM 엘리먼트를 생성하게 된다.

 

엘리먼트의 생김새

리액트 엘리먼트는 자바스크립트의 객체 형태로 존재한다.

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

위 코드는 버튼을 나타내기 위한 리액트 엘리먼트이다.

코드에서 볼 수 있듯 자바스크립트 객체임을 알 수 있다!

 

그리고 위의 리액트 엘리먼트가 실제로 렌더링되면 아래와 같은 DOM 엘리먼트가 된다.

<button class ='bg-green'>
    <b>
        Hello, element!
    </b>
</button>

 

만약 바로 DOM 엘리먼트로 렌더링할 수 없는 컴포넌트가 있다면

리액트는 해당 컴포넌트의 엘리먼트를 생성해서 합친다.

 

엘리먼트의 특징

리액트 엘리먼트는 불변성이라는 특징을 가진다.

그렇기에 리액트 엘리먼트는 한번 생성하고 나면 children이나 attrubutes를 변경할 수 없다.

이처럼 한번 생성된 후에는 변경이 불가능하고, 새로운 엘리먼트를 만들어서 바꾸어야 한다.

그리고 엘리먼트가 바뀔 때, virtual DOM에서는 변경된 부분을 계산해서 해당 부분만을 다시 렌더링 하기에

빠르게 렌더링이 가능하다

 

엘리먼트 렌더링

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

엘리먼트를 렌더링 하기 위해서는 ReactDOM에 있는 root의 render() 함수를 사용하여 렌더링 할 수 있다.

render() 함수는 파라미터로 받은 리액트 엘리먼트를 root DOM node에 렌더링하는 역할을 한다.

const element =<h1> hello </h1>;
const root = ReactDOM.creatRoot(document.getElementById('root'));
root.render(element);