chap 4. 엘리먼트 렌더링

4.1 엘리먼트에 대해 알아보기

1. 엘리먼트의 정의

엘리먼트는 리액트 앱을 구성하는 가장 작은 블록들을 의미한다.

리액트 엘리먼트는 화면에서 보이는 것을 기술하며, 엘리먼트가 기술한 내용을 토대로 실제 화면에서 보게되는 DOM 엘리먼트가 만들어진다.

 

아래 JSX 예제코드를 살펴보자.

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

element 변수에 값을 대입하는 코드가 실행되면, 리액트의 createElement() 함수를 사용하여 엘리먼트를 생성하게 된다.

이렇게 생성된 것이 리액트 엘리먼트이며, 리액트는 이 엘리먼트를 이용해 실제 화면에서 보게될 DOM 엘리먼트를 생성한다.

2. 엘리먼트의 생김새

리액트 엘리먼트는 컴포넌트 유형(ex. Button)과 속성(ex. color) 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 형태로 존재한다.

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

• type에 HTML 태그 이름이 문자열로 들어가는 경우, 엘리먼트는 해당 태그 이름을 가진 DOM Node를 나타내고 props는 속성을 의미한다.
• 위 코드는 버튼을 나타내는 엘리먼트이며, 해당 엘리먼트가 렌더링 되면 아래와 같은 DOM 엘리먼트가 된다.

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

 

리액트 엘리먼트는 자바스크립트 객체 형태로 존재하며, 이 객체를 만드는 역할을 하는 것이 createElement() 함수이다.

createElement()함수에는 type, props, children 파라미터가 필요하다.

• type : HTML 태그이름이 문자열 혹은, 또 다른 리액트 컴포넌트를 명시한다.
• props : 엘리먼트의 속성(attributes)
• children : 해당 엘리먼트의 자식 엘리먼트들

컴포넌트 렌더링을 위해서 모든 컴포넌트는 createElement()함수를 통해 엘리먼트로 변환되는 것에 유의하자.

3. 엘리먼트의 특징

엘리먼트의 특징은 바로 불변성(immutable)이기 때문에, 엘리먼트가 생성된 후에는 children이나 attributes를 바꿀 수 없다는 특징을 가진다.

그렇다면 화면에 변경된 엘리먼트를 보여주기 위해서는 어떻게 해야할까?

이런 경우에는 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 만들어서 기존엘리먼트와 바꿔치기한다.

리액트는 VirtualDOM을 이용해 변경된 부분을 계산하고 해당 부분만 다시 렌더링 하여 화면에 새로운 내용을 보여준다.

 

4.2 엘리먼트 렌더링하기

엘리먼트를 생성한 후에 실제로 화면에 보여주기 위해서 렌더링 과정이 필요하다.

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

위와 같이 root라는 id를 가지고 있는 <div>태그를 root DOM node 라고 부른다.

이 태그안에 리액트 엘리먼트들이 렌더링되며, 리액트 DOM에 의해서 관리된다.

root <div>에 리액트 엘리먼트를 렌더링 하기 위해 아래와 같은 코드를 사용한다.

const element=<h1>안녕, 리액트!</h1>;
const root = ReactDOM.createRoot(Document.getElementById('root'));
root.render(element);

이 코드는 먼저 엘리먼트를 생성하고, 생성된 엘리먼트를 root div에 렌더링하는 코드이다.

렌더링을 위해 ReactDOM의 createRoot() 함수를 사용하여 만든 root의 render() 함수를 사용하게 된다.

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

 

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

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

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

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(element);
}

setInterval(tick,1000);

setInterval() 함수를 사용해 tick() 함수를 매초 호출하고 있다.

tick()함수가 호출될 때마다 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성해 바꿔치기한다.