[React] (리액트 공부하기 7) 리액트 엘리먼트(Element)

1. 리액트 엘리먼트란?

리액트 엘리먼트는 리액트가 화면에 보여줄 UI의 가장 작은 단위이다.

예:

JSX에서 다음과 같이 작성한 코드:

<button className="bg-green">
  <b>Hello, element!</b>
</button>

위 코드는 리액트 내부적으로 엘리먼트 객체로 변횐 된다. 이 객체는 리액트가 UI를 효율적으로 관리하기 위해 사용하는 데이터 구조이다.

---

2. 리액트 엘리먼트의 구조

리액트 엘리먼트는 자바스크립트 객체형태로 저장된다. 예를 들어 위의 JSX는 다음과 같은 객체로 변환 된다:

{
 type: 'button', // HTML 태그 타입 (button)
 props: { // 엘리먼트의 속성(props)
   className: 'bg-green', // 버튼의 클래스 속성
   children: { // 자식 엘리먼트
     type: 'b', // HTML 태그 타입(b)
     props: {
       children: 'Hello, element!' // b 태그 안의 텍스트 내용
     }
}

---

3. 리액트 엘리먼트가 렌더링되는 과정

동작 과정:

1. JSX를 작성하면:

<button className="bg-green">
  <b>Hello, element!</b>
</button>

2. 내부적으로 React.createElement() 함수가 실행된다:

React.createElement(
  'button',
  { className: 'bg-green' },
  React.createElement(
    'b',
    null,
    'Hello, element!'
  )
);

3. React.createElement() 함수는 엘리먼트 객체를 반환한다:

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

4. 이 객체를 기반으로 리액트는 Virtual DOM을 구성하고, 브라우저에 최종 HTML을 렌더링한다:

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

---

4. 엘리먼트 객체의 주요 필드

(1) type

• 어떤 태그 또는 컴포넌트를 생성할 지 정의한다.
• 예: 'button', 'div', 'h1', 또는 사용자 정의 컴포넌트 이름.

(2) props

• 엘리먼트의 속성을 저장
• 예: className, onClick 등 HTML 속성 및 자식 엘리먼트를 포함한다.

(3) children

• 엘리먼트 안에 들어가는 자식 엘리먼트를 정의한다.
• 자식은 문자열, 다른 엘리먼트, 또는 배열 형태로 나타낼 수 있다.

---

5. 리액트 엘리먼트와 리액트 컴포넌의 차이

• 리액트 엘리먼트:

• "객체"로 표현된 UI의 가장 작은 단위.

• 브라우저 DOM을 직접적으로 구성.

• JSX를 작성하면 리액트 엘리먼트로 변환 된다.

• 리액트 컴포넌트:

• 엘리먼트를 생성하는 함수 또는 클래스.

• 재사용 가능한 UI 블록.

• 컴포넌트는 엘리먼트를 반환 한다.

예:

function Button() {
 return (
   <button className="bg-green">
     <b>Hello, element!</b>
   </button>
 );
}

• button은 컴포넌트이고, 이 컴포넌트가 리턴한 JSX는 내부적으로 엘리먼트 객체로 변환 된다.

---

6. 실제 동작 흐름

예제 코드:

const element = (
  <button className="bg-green">
    <b>Hello, element!</b>
  </button>
);

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

동작:
1. JSX로 작성된 element는 React.createElement()를 통해 엘리먼트 객체로 변환 된다.
2. 리액트는 이 엘리먼트 객체를 기반으로 Virtual DOM을 생성한다.
3. ReactDOM.render()가 Virtual DOM을 실제 DOM에 렌더링한다:

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

---

7. 정리

• 리액트 엘리먼트는 리액트가 UI를 구성하는 가장 기본적인 단위이다.
• JSX는 React.createElement()를 호출하여 엘리먼트 객체로 변환 된다.
• 리액트 엘리먼트를 잘 이해하면, 리액트의 동작 원리를 더 쉽게 이해할 수 있다.