• 출처: 소플의 처음 만난 리액트

# Rendering Elements

리액트 element에 대해 배워보겠습니다.
이미 이전 강의에서 React의 createElement 라는 함수에 대해서 배웠던 것을 기억하시나요?
createElement 함수는 이름 그대로 element를 생성해주는 함수입니다.
그렇다면 element가 어떤 것이고, 어떤 역할을 하는지 잘 알고 있어야겠죠.
이번 강의에서 element의 개념과 역할, 그리고 element가 렌더링되는 과정에 대해서 자세히 알아보도록 하겠습니다.

# Elements란?

먼저 element란 무엇인지에 대해서 알아보도록 하겠습니다.
어떤 물체를 구성하는 성분을 영어로 'element'라고 부릅니다.

#단어의 사전적 정의

element = 요소, 성분

마찬가지로 React element도 React 앱을 구성하는 '요소'를 의미합니다.

React 공식 홈페이지에서는 element를 다음과 같이 정의하고 있습니다.

Elements are the smallest building blocks of React apps.

위의 문장을 번역하면 element 는 'React 앱의 가장 작은 빌딩 블록들' 이라는 의미가 됩니다.

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

즉, 리액트 앱을 구성하는 가장 작은 블록들을 엘리먼트라고 부르는 것이죠.

# DOM Element

• 이전에 웹 개발을 했던 분은 이미 엘리먼트라는 용어를 많이 들어봤을 겁니다.
• 엘리먼트는 원래 웹사이트에 대한 모든 정보를 담고 있는 객체인 DOM 에서 사용하는 용어입니다.
• 그래서 기존에는 엘리먼트 라고 하면 DOM 엘리먼트를 의미했습니다.

DOM 엘리먼트가 어떻게 생겼는지 한번 볼까요?

이 그림은 우리가 앞에서 만든 리액트 애플리케이션을 실행한 다음
chrome 브라우저의 개발자 도구에서 'Elements' 탭을 누른 모습입니다.

참고) MS Edge에서는 '요소' 탭과 같았다.

• 탭 이름부터 'Elements'이기 때문에 Element를 모아 놓은 것임을 알 수 있습니다.
• 하지만 여기에 보이는 엘리먼트는 React element가 아니라 'DOM' 엘리먼트 이며, HTML 요소를 나타냅니다.
  실제로 우리가 화면에서 볼 수 있는 것들이죠.

# React Element vs. DOM Element

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

화면에 나타나는 내용을 기술하는 자바스크립트 객체
-> Descritpor (React 초창기)
-> element

• React 가 개발되기 시작한 아주 초창기에, 화면을 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어가 필요했습니다.
• 그래서 처음에는 '기술하다'라는 의미를 가진 영어 단어 'Describe'에서 파생된 'Descriptor' 라는 이름으로 불렸죠.
• 하지만 Descriptor 가 최종적으로 나타나는 형태는 DOM 엘리먼트였기 때문에,
• DOM 과의 통일성을 위해서 'element'라고 부르기로 결정했습니다.

이 그림은 React element와 DOM element를 나타낸 것입니다. 앞에서 React의 Virtual DOM 에 대해서 배웠습니다.

• 실제 Browser의 DOM 에 존재하는 element는 DOM element가 되는 것이고,
• React의 Virtual DOM 에 존재하는 element가 바로 React element가 되는 것입니다.

결국 React 엘리먼트는 DOM 엘리먼트의 가상 표현이라고 볼 수 있습니다.

• 그리고 DOM 엘리먼트는 React 엘리먼트에 비해서 많은 정보를 담고 있기 때문에, 상대적으로 크고 무겁습니다.

앞으로 이 강의에서 말하는 'element' 는 특별한 언급이 없는 한, React 엘리먼트를 의미한다고 보시면 됩니다.

# ✨element = React Element✨

element는 화면에서 보이는 것을 기술!

React Element 는 화면에서 보이는 것을 기술합니다 :
element가 기술한 내용을 토대로, 실제 우리가 화면에서 보게 되는 DOM Element 가 만들어집니다.

앞에서 JSX 를 배울 때 살펴봤던 예제 코드를 다시 한번 보도록 하겠습니다.
이 코드는 JSX를 사용하여 작성된 코드입니다.

• 앞에서는 element에 대해 배우지 않았기 때문에 그냥 지나쳤지만 대입연산자 왼쪽 부분에 나오는 변수의 이름이 element로 되어 있는 것을 볼 수 있습니다.
• 이 코드가 실행될 때 대입연산의 오른쪽 부분은 React의 createElement 함수를 사용하여 element를 생성하게 됩니다.
• 결국 이렇게 생성된 것이 React element가 되는 것입니다.
• 그리고 React는 이 element를 이용해서 실제 화면에서 보게 될 DOM 엘리먼트를 생성하게 됩니다.

# Elements의 생김새

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

element가 화면에 보이는 것을 기술한다고 했는데
실제로 element는 어떤 형태로 존재하는지 궁금하시지 않나요?

결론부터 말씀드리면,

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

합니다.

• element는 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체입니다.
• 뒤에서 나오겠지만 이 객체는 마음대로 변경할 수 없는 불변성을 갖고 있습니다. 한번 생성되면 바꿀 수 없다는 뜻이죠.

그럼 element의 실제 모습을 한번 보도록 할까요?

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

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

단순히 자바스크립트 객체임을 알 수 있죠.

이 코드처럼

• type의 HTML 태그 이름이 문자열로 들어가는 경우, element는 해당 태그 이름을 가진 DOM 노드를 나타내고,
• props는 속성에 해당합니다. props에 대해서는 뒤에서 자세히 배울 예정이기 때문에 지금은 그냥 넘어가도록 하겠습니다.
• 그리고 위 element가 실제로 렌더링이 된다면 그림과 같은 DOM element가 될 것입니다.
  

그렇다면 엘리먼트 타입의 HTML 태그 이름이 문자열로 들어가는 것이 아닌 경우에는 어떻게 될까요?

• 이 자바스크립트 코드는 리액트의 컴포넌트 엘리먼트를 나타낸 것입니다.

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

이 역시도 일반적인 자바스크립트 객체입니다.

• 다만 방금 전에 나왔던 엘리먼트와 한 가지 다른 점은, type에 문자열로 된 HTML 태그가 아닌 리액트 컴포넌트의 이름이 들어간다는 점입니다.

이처럼 리액트 엘리먼트는 자바스크립트 객체 형태로 존재합니다.

그리고 이 객체를 만드는 역할을 하는 것이 바로 앞에서 나왔던 createElement 함수입니다.

앞에서 createElement함수를 호출할 때 3가지의 파라미터를 넣었는데 그 부분을 다시 한 번 보도록 할까요?

• 첫 번째 파라미터로는 type 이 들어갑니다.
  • 여기에는 HTML 태그 이름이 문자열로 들어가거나,
  • 또 다른 리액트 컴포넌트가 들어가게 됩니다.
    • 이것이 결국 아까 우리가 개발자 도구를 통해서 보았던 HTML 태그가 되는 것이죠.
    • 만약 여기에 HTML 태그가 아닌 리액트 컴포넌트를 넣으면 어떻게 될까요?
    • 모든 리액트 컴포넌트는 최종적으로는 HTML 태그를 사용하게 되어 있습니다.
      하나의 컴포넌트는 여러 개의 자식 컴포넌트를 포함할 수 있고
      자식 컴포넌트를 모두 쭉 분해해 보면 결국 HTML 태그가 나오는 것이죠.
• 두 번째 파리미터로는 props라는 것이 들어갔었습니다.
  • 아직 props에 대해 배우지 않았기 때문에, 이 부분은 그냥 간단하게 element의 속성이라고 설명하겠습니다.
    • 아까 개발자 도구의 그림에서 HTML 태그가 있고 해당 태그에 여러가지 속성이 들어가 있었죠?
      예를 들면 class나 style 같은 것들 말이죠
      이런 속성을 attribute라고 부릅니다.
      props는 attribute 보다는 좀 더 상위에 있는 복잡한 개념이지만 일단 element의 속성이라고만 이해하고 넘어가겠습니다.
• 그리고 세 번째 파라미터로는 children이 들어가게 됩니다.
  • 해당 엘리먼트의 자식 엘리먼트들이 이 부분에 들어가게 됩니다.
  • 실제 개발자 도구의 그림에서는 하나의 HTML 태그 하위에, 다시 여러 개의 HTML 태그가 나오는 것을 볼 수 있었습니다.
    이러한 HTML 태그들이 결국 자식 엘리먼트가 되는 것입니다.

이제 실제로, createElement함수가 동작하는 과정을 코드와 함께 살펴보도록 하겠습니다.

# createElement 함수가 동작하는 과정

예제 코드

• 
• 이 코드에는 Button 컴포넌트와 ConfirmDialog 컴포넌트가 있으며,

• ConfirmDialog 컴포넌트가 Button 컴포넌트를 포함하고 있습니다.

  Button 컴포넌트 ⊂ ConfirmDialog 컴포넌트

• 여기에서 ConfirmDialog 컴포넌트의 엘리먼트는 어떤 모습이 될까요?
  아마도 다음과 같은 형태가 될 것입니다.
• 여기서 첫번째 children은 type이 HTML 태그 중 하나인 p 태그이기 때문에 곧바로 렌더링이 될 수 있는 상태입니다.
• 하지만 두번째 children의 type은 HTML 태그가 아니라 리액트 컴포넌트의 이름인 Button 입니다.
• 이 경우에 리액트는 버튼 컴포넌트의 엘리먼트를 생성해서 합치게 됩니다. 그래서 최종적으로는 엘리먼트는 다음과 같은 모습이 될 것입니다.

• 이처럼 컴포넌트 렌더링을 위해서 모든 컴포넌트가 createElement 함수를 통해 엘리먼트로 변환된다는 것을 기억하시기 바랍니다.

📍정리

Rendering Elements

• element란?
  = 리액트 앱을 구성하는 작은 블럭들
  = React 엘리먼트( 가상형태, 코드로 기술한 형태 )
  ≠ DOM 엘리먼트( 렌더링되어 보이는 형태 )
• 자바스크립트 객체 형태로 존재
• createElement(): 그 객체를 만드는 함수 ( 모든 컴포넌트가 이 함수를 통해 element로 변환됨 )
  * 3가지 파라미터:
  type : HTML 태그 문자열 이름 or 리액트 컴포넌트
  props : 엘리먼트의 속성
  children

• element의 불변성

• element의 역할, element가 렌더링되는 과정 : 다음 포스트에서

+ 궁금한 점

• 컴포넌트와 엘리먼트의 차이 ???
  (일단 둘의 포함관계는 엘리먼트 ⊂ 컴포넌트 이다.)