[React.js] 컴포넌트를 생성하는 방법 2가지 (JSX, React.createElement)

컴포넌트를 생성하는 방법 2가지 (JSX, React.createElement)

들어가며

• 리액트(React.js)에서 컴포넌트를 생성하는 방법 2가지를 정리해본다.

 

컴포넌트 생성 방법

① 함수형 컴포넌트

function Greeting() {
  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
}

 

• 함수형 컴포넌트는 자바스크립트 함수로 정의되며, JSX(JavaScript XML) 문법을 사용하여 UI를 반환한다.
• @<div>@와 @<h2>@ 태그를 사용하여 UI를 정의한다.
  • JSX는 Babel 같은 컴파일러를 통해 @React.createElement@ 호출로 변환된다.
• 코드가 더 직관적이고 읽기 쉬우며, 컴포넌트를 작성할 때 HTML과 유사한 문법을 사용할 수 있다.

 

② @React.createElement@

import React from 'react';

const Greeting = () => {
  return React.createElement(
    'div',
    {},
    React.createElement('h2', {}, 'hello world')
  );
};

 

• JSX를 사용하지 않고 @React.CreateElement(element_tagName, attribute_object, child_element)@ 함수를 사용하여 UI를 정의한다. 
  • 첫 번째 인수 : HTML 태그 이름 (또는 다른 컴포넌트)
  • 두 번째 인수 : 속성 객체 (여기에서는 빈 객체 @{}@)
  • 세 번째 인수 : 자식 요소
• JSX를 사용할 수 없는 환경에서는 이 방법을 사용하여 리액트 요소를 직접 생성할 수 있다.
• 또한, 이 방법은 JSX가 어떻게 @React.createElement@로 변환되는지 이해하는 데 도움이 된다.

 

JSX에서 변환되는 코드는 반드시 하나의 루트 요소로 래핑(Wrapping) 되어야 하는데, 그 이유는 Babel과 같은 컴파일러에 의해 React.createElement 호출로 변환되기 때문이다.

 

참고 사이트

createElement – React

How To Create React Elements with JSX | DigitalOcean