Elements 란? (정의와 생김새)

Elements 의 사전적 의미 : 어떤 물체를 구성하는 성분

 

React 에서 Elements 란?

React 앱을 구성하는 가장 작은 요소들

 

Elements 는 원래 웹사이트에 대한 모든 정보를 담고 있는 DOM에서 사용하는 용어이기 때문에

기존에는 Elements 라 하면 아래와 같은 DOM Elements 를 의미하는 것이었다.

HTML 요소를 나타내는 DOM Elements

---

 

그렇다면 React Elements 와 DOM Elements 는 어떤 차이가 있을까?

 

React 가 개발되기 시작한 초창기에는, '화면에 나타내는 내용을 기술하는 자바스크립트 객체' 를 일컫는 용어가 필요했다.

그래서 처음에는 '기술하다' 라는 의미를 가진 영단어 discript 에서 파생된 Descriptor 라고 불렸는데,

Descriptor 가 최종적으로 DOM Elements 의 형태로 나타났기 때문에 DOM 과의 통일성을 위해 Elements 로 부르게 됐다.

 

이 그림은 React Elements 와 DOM Elements 를 나타낸 것이다.

실제 브라우저의 DOM 에 존재하는 Elements 는 DOM Elements 가 되는 것이고,

React 의 Virtual DOM 에 존재하는 Elements 가 바로 React Elements 가 되는 것이다.

결국  React Elements 는 DOM Elements 의 가상 표현이라고 볼 수 있다.

그리고 DOM Elements 는 React Elements 에 비해 많은 정보를 가지고 있기 때문에 상대적으로 크고 무겁다.

 

앞으로 언급하는 Elements 는 대부분 React Elements 라고 생각하면 된다.

---

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

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

 

이전에 JSX 를 배울 때 사용했던 예제 코드를 다시 한 번 살펴보자

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

이 코드는 JSX 를 사용하여 작성된 코드이다.

이때 대입 연산자 = 의 왼쪽을 보면 변수의 이름이 element 인 것을 알 수 있다.

이 코드가 실행될 때, 대입 연산자의 오른쪽 부분은 React 의 createElement() 함수를 사용하여 element 를 생성하게 된다.

그리고 이렇게 생성된 것이 바로 React Elemenst 가 되는 것이다.

React 는 이 element 를 통해서 실제로 우리가 화면에서 보게 될 DOM Elements 를 생성한다.

---

 

그렇다면 React Elements 는 실제로 어떻게 생겼을까?

 

결과적으로, React Elements 는 자바스크립트 객체 형태로 존재한다.

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

그리고 이 객체는 마음대로 변경할 수 없는 불변성을 가지고 있다.

 

그럼 코드를 통해 Elements 의 실제 모습을 봐보자

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

이 코드는 button 을 나타내기 위한 Elements 인데, 단순히 자바스크립트 객체임을 알 수 있다.

이 코드에서 처럼 type 에 HTML 태그의 이름이 문자열로 들어가는 경우,

Elements 는 해당 태그의 이름을 가진 DOM node 를 나타내고 props 는 속성에 해당한다.

이 Elements 가 실제로 렌더링 된다면 아래와 같은 DOM Elements 가 될것이다.

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

 

그렇다면 Elements type 의 HTML 태그 이름이 문자열이 아닌 다른 것으로 들어가는 경우에는 어떻게 될까?

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

이 자바스크립트 코드는 React 의 Component Elements 를 나타낸 것이다.

이것도 역시 일반적인 자바스크립트 객체이지만, 이전의 Elements 와 한 가지 다른 것은 type 에 문자열로 된 HTML 태그가 아닌 React Component 의 이름이 들어갔다는 것이다.

 

이처럼 React Elements 는 자바스크립트 객체 형태로 존재하며 이 객체를 만드는 역할을 하는 것이 바로 createElement() 함수이다.

 

---

 

이전에 createElements() 함수를 호출할 때 세 가지의 파라미터를 넣었는데, 그 부분을 다시 살펴보자

 

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

첫 번째 파라미터로는 type 이 들어간다. 여기에는 HTML 태그 이름이 문자열로 들어가거나 또다른 React Component 가 들어가게 되고, 이것이 결국 우리가 개발자 도구를 통해 보게되는 HTML 태그가 되는 것이다.

 

만약 여기에 HTML 태그가 아닌 React Component 를 넣으면 어떻게 될까?

모든 React Component 는 최종적으로 HTML 태그를 사용하게 되어 있기 때문에 하나의 Component 는 여러 개의 자식 Component 를 포함할 수 있고, 자식 Component 를 모두 분해해보면 결국 HTML 태그가 나오는 것이다.

 

두 번째 파라미터로는 props 가 들어간다. props 에 대해서는 아직 배우지 않았기 때문에 Element 의 속성이라고 설명하자.

개발자 도구에서 살펴보면 HTML 태그가 있고 해당 태그에  class 나 style 같은 여러 가지 속성이 들어가 있는데, 이런 속성을 attribute 라 부른다. props 는 attribute 상위에 있는 복잡한 개념이지만 일단 Elements 의 속성이라고 이해하고 넘어가자

 

세 번째 파라미터로는 children 이 들어가게 되는데, 해당 Elements 들의 자식 Elements 들이 이 부분에 들어가게 되는 것이다. 실제 개발자 도구의 그림에서는 하나의 HTML 태그 하위에 다시 여러 개의 HTML 태그가 나오는 것을 볼 수 있는데,

이러한 HTML 태그들이 결국 자식 Elements 가 되는 것이다.

---

 

이제 실제로 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 컴포넌트를 포함한다. 

여기에서 ConfirmDialog 컴포넌트의 Elements 는 아래와 같은 형태가 된다.

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

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

하지만 두 번째 children 의 type 은 React 컴포넌트의 이름인 Button 이어서, 이 경우에 React 는 Button 컴포넌트의 Elements 를 생성하여 합치게 된다.

그래서 최종적으로 Elements 는 다음과 같은 모습이 될 것이다.

{
        type: 'div'
        props: {
            children: [
                {
                    type: 'p',
                    props: {
                        children: '내용을 확인했다면 확인 버튼을 눌러주세요.'
                    }
                },
                {
                    type: 'button',
                    props: {
                        className: 'bg-green',
                        children: {
                            type: 'b',
                            props: {
                                children: '확인'
                            }
                        }
                    }
                }
            ]
        }
}

이처럼 컴포넌트 렌더링을 위해서 모든 컴포넌트가 createElement() 함수를 통해
Elements 로 변환된다는 것을 알아두자

 

 

 

정리참고

https://www.youtube.com/watch?v=sJQsiFVfBSM&list=PLo3AHtncM26y0qX58gjc_QrkYlBCzQ2R_&index=13