직접 만든 createElement으로 jsx 문법 이해하기

개요

• 패스트캠퍼스 김민태 개발자 강의에서 리액트를 구현한것을 통해 이해한것을 요약한다.

코드

• React의 JSX → Virtual DOM → 실제 DOM 흐름을 단순화해서 구현한 예제

export function createDOM(node) {
  if (typeof node === 'string') {
    return document.createTextNode(node);
  }

  const element = document.createElement(node.tag);

  Object.entries(node.props)
    .forEach(([name, value]) => element.setAttribute(name, value));

  node.children
    .map(createDOM)
    .forEach(element.appendChild.bind(element));

  return element;
}

export function createElement(tag, props, ...children) {
  return { tag, props, children };
}

export function render(vdom, container) {
  container.appendChild(createDOM(vdom));
}

/* @jsx createElement */
const vdom2 = <p>
  <h1>React 만들기</h1>
  <ul>
    <li style="color:red">첫 번째 아이템</li>
    <li style="color:blue">두 번째 아이템</li>
    <li style="color:green">세 번째 아이템</li>
  </ul>
</p>;

정리

• Babel은 JSX 문법을 함수 호출 코드로 변환한다.

• @jsx 주석을 이용하면, JSX가 호출하는 함수를 React.createElement 대신 커스텀 함수 (createElement)로 지정할 수 있다.

• JSX는 결국 함수 호출 문법의 문법적 설탕(syntactic sugar)이다.