컴포넌트 작성과 Virtual DOM 구조 분석

오늘은 컴포넌트 작성과 Virtual DOM 구조를 분석해보겠습니다!

 

 

1. 컴포넌트 구현

App.tsx

function App() {
  return (
    <div id="app">
      <Header title="Header" buttonText="login" />
      <h1>Hello, React!</h1>
      <Content text="Virtual DOM 이해 및 복잡한 구조의 컴포넌트 분석" />
    </div>
  );
}

 

 

Header.tsx

function Header({ title, buttonText }) {
  return (
    <div className="header">
      <h1 id="title">{title}</h1>
      <button id="login">{buttonText}</button>
    </div>
  );
}

 

 

Content.jsx

function Content({ text }) {
  return (
    <div className="container">
      <p id="content">{text}</p>
    </div>
  );
}

 

 

 

 

2. Virtual DOM 동작 원리

컴포넌트가 Virtual DOM을 반환하도록 하기 위해 createElement 함수를 구현했습니다.

function createElement(type, props, ...children) {
  if (typeof type === "function") {
    return type(props);
  }

  return {
    type,
    props: props || {},
    children: children.flat(),
  };
}

 

이 함수는:

• type이 함수인 경우(컴포넌트): 해당 함수를 실행
• type이 문자열인 경우(HTML 태그): Virtual DOM 객체 생성

 

 

 

 

3. Virtual DOM 구조 분석

구현한 컴포넌트의 Virtual DOM 구조를 확인해보면:

{
  "type": "div",
  "props": {
    "id": "app"
  },
  "children": [
    {
      "type": "div",
      "props": {
        "className": "header"
      },
      "children": [
        {
          "type": "h1",
          "props": {
            "id": "title"
          },
          "children": ["Header"]
        },
        {
          "type": "button",
          "props": {
            "id": "login"
          },
          "children": ["login"]
        }
      ]
    },
    {
      "type": "h1",
      "props": {},
      "children": ["Hello, React!"]
    },
    {
      "type": "div",
      "props": {
        "className": "container"
      },
      "children": [
        {
          "type": "p",
          "props": {
            "id": "content"
          },
          "children": ["Virtual DOM 이해 및 복잡한 구조의 컴포넌트 분석"]
        }
      ]
    }
  ]
}

 

 

 

 

 

 

학습 정리

1. 함수형 컴포넌트의 이해

• 컴포넌트는 단순한 JavaScript 함수라는 것을 배웠습니다.
• props를 매개변수로 받아서 Virtual DOM 객체를 반환하는 구조입니다.
• JSX를 사용하여 직관적으로 컴포넌트를 작성할 수 있었습니다.

 

2. Virtual DOM의 구조

• Virtual DOM은 실제 DOM을 JavaScript 객체로 표현한 것입니다.
• 각 객체는 type(태그 이름), props(속성), children(자식 요소) 구조를 가집니다.
• createElement 함수를 통해 JSX가 Virtual DOM 객체로 변환됩니다.

 

3. 컴포넌트 간 데이터 전달

// 부모 컴포넌트에서
<Header title="Header" buttonText="login" />

// 자식 컴포넌트에서
function Header({ title, buttonText }) {
  // props를 통해 전달받은 데이터 사용
}

• props를 통해 부모에서 자식으로 데이터를 전달할 수 있습니다.
• 구조 분해 할당을 통해 props를 쉽게 사용할 수 있습니다.

 

4. 중첩된 컴포넌트 구조

function App() {
  return (
    <div id="app">
      <Header />      {/* 자식 컴포넌트 1 */}
      <h1>Hello!</h1> {/* 일반 HTML 요소 */}
      <Content />     {/* 자식 컴포넌트 2 */}
    </div>
  );
}

 

• 컴포넌트 안에 다른 컴포넌트를 포함할 수 있습니다.
• HTML 요소와 컴포넌트를 자유롭게 조합할 수 있습니다.

 

5. createElement 함수의 역할

function createElement(type, props, ...children) {
  if (typeof type === "function") {
    return type(props);
  }
  return {
    type,
    props: props || {},
    children: children.flat(),
  };
}

 

• JSX를 Virtual DOM 객체로 변환하는 핵심 함수입니다.
• 컴포넌트와 일반 HTML 요소를 모두 처리할 수 있습니다.
• children.flat()을 통해 중첩된 자식 요소들을 처리합니다.

 

 

6. 새롭게 알게된 점

• Virtual DOM이 단순한 JavaScript 객체라는 점
• JSX가 결국 createElement 함수 호출로 변환된다는 점
• 컴포넌트가 props를 받아 Virtual DOM을 반환하는 순수 함수라는 점
• Babel이 JSX를 JavaScript 로 변환해주는 과정