elements의 정의와 생김새 [처음 만난 리액트 #12]

4강. Rendering Elements

[무료] 처음 만난 리액트(React) - 인프런 | 강의

elements의 개념과 역할, elements가 rendering되는 과정에 대해 알아보기 💻

---

Elements란?

elements : 어떤 물체를 구성하는 성분

 

Elements are the smallest building blocks of React apps

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

 

Element는 웹사이트에 대한 모든 정보를 담고있는 객체인 DOM에서 사용하는 용어

기존에는 element하면 DOM element를 의미

 

 

● 앞에서 만든 리액트 애플리케이션을 실행한 다음, 크롬 브라우저의 개발자 도구에서 elements 탭을 누른 모습 (element들을 모아놓음)

● 여기서의 element는 React elements가 아니라 DOM elements (HTML 요소)

 

React elements와 DOM elements의 차이?

● react가 개발되기 시작한 초창기에, 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 Descriptor라고 부름

● Descriptor가 최종적으로 나타나는 형태는 DOM elements였기 때문에 DOM과의 통일성을 위해 element라고 부르기로 결정

 

 

● 실제 Browser DOM에 존재하는 elements: DOM Elements

● 리액트의 Virtual DOM에 존재하는 elements: React Elements

 

React Elements는 DOM Elements의 가상 표현

DOM Elements는 React Elements에 비해 많은 정보를 담고 있기 때문에 상대적으로 크고 무거움

 

React Elements는 화면에서 보이는 것들을 기술

elements가 기술한 내용을 토대로 실제 우리가 화면에서 보게 되는 DOM elements가 만들어짐

 

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

 

▲ JSX를 사용하여 작성된 코드

 

대입연산자 왼쪽의 변수 이름이 element

이 코드가 실행될 때, 대입연산자의 오른쪽 부분은 리액트의 create element 함수를 사용하여 element를 생성하게 됨

 

---

Elements의 생김새

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

● elements는 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체

● 이 객체는 한 번 생성되면 마음대로 변경할 수 없는 불변성을 가짐 

 

{

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

 

▲ button을 나타내기 위한 element (일반적인 자바스크립트 객체)

 

type의 HTML 태그 이름이 문자열로 들어가는 경우, elements는 해당 태그 이름을 가진 DOM 노드를 나타내고 props는 속성에 해당

 

 

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

 

▲ 위의 element가 실제로 렌더링 된다면 이런 DOM element가 됨 

 

 

element의 타입에 HTML 태그 이름이 문자열로 들어가는 것이 아닌 경우에는?

 

{
    type: Button,
    props: {
        color: 'green',
        children: 'Hello, element!'
    }
}

 

▲ 리액트의 컴포넌트 element (일반적인 자바 스크립트 객체)

type에 문자열로 된 HTML 태그가 아닌, 리액트 컴포넌트의 이름이 들어감

 

---

● React Elements는 자바 스크립트 객체 형태로 존재 

● 이 객체를 만드는 역할을 하는 것이 createElement 함수

● createElement 함수를 호출할 때, 세 가지의 파라미터를 넣었음

 

React.createElement(
    type,
    [props],
    [...children]
)

 

- type: HTML 태그 이름이 문자열로 들어가거나 또 다른 리액트 컴포넌트가 들어감 -> 이것이 결국 아까 개발자 도구를 통해 봤던 HTML 태그

- props: element의 속성 

- children: 해당 element의 자식 element들이 이 부분에 들어감

  하나의 HTML 태그 하위에 여러 개의 HTML 태그(=자식 element)가 나오는 것을 볼 수 있음

 

---

createElement가 동작하는 과정

function Button(props) {
    return (
        <button className={`bg-${props.color}`}>
            <b>
                {props.children}
            </b>
        <button>
    )
}

function ConfirmDialog(props) {
    return (
        <div>
            <p>내용을 확인하셨으면 확인 버튼을 눌러주세요.</p>
            <Button color='green'>확인</Button>
        </div>
    )
}

 

Button 컴포넌트와 confirmDialog 컴포넌트가 존재

confirmDialog 컴포넌트가 Button를 포함하고 있음

 

{
    type: 'div',
    props: {
        children: [
            {
                type: 'p',
                props: {
                    children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
                type: Button,
                props: {
                    color: 'green',
                    children: '확인'
                }
            }
        ]
    }
}

 

▲ confirmDialog 컴포넌트의 element

 

첫 번째 children은 type이 HTML 태그 중 하나인 p 태그이기 때문에 곧바로 렌더링 될 수 있는 상태

두 번째  children은 type이 HTML 태그가 아니라 리액트 컴포넌트의 이름인 Button - 이 경우에 리액트는 Button 컴포넌트의 element를 생성해서 합치게 됨 

 

{
    type: 'div',
    props: {
        children: [
            {
                type: 'p',
                props: {
                    children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
                type: Button,
                props: {
                    classNameL 'bg-green',
                    children: {
                        type: 'b',
                        props: {
                            children: '확인'
                        }
                    }
                }
            }
        ]
    }
}

 

컴포넌트 렌더링을 위해서 모든 컴포넌트가 createElement 함수를 통해 element로 변환된다는 것을 기억!