[React] (리액트 공부하기 2) createElement() 함수

젼이·2025년 1월 5일

리액트 정복하기

목록 보기

2/36

리액트를 처음 공부 할 때 createElement() 함수를 배우는 이유는 리액트의 JSX가 결국 이 함수로 변환되기 때문이다!!!!

JSX는 코드 작성이 직관적이고 편리하게 만들어졌지만, 내부적으로는 React.createElement()를 통해 실제 DOM 요소로 변환 된다.
따라서, createElement()의 구조와 동작 원리를 이해하면 리액트가 어떻게 DOM을 생성하고 관리하는지 더 잘 이해할 수 있다!

왜 createElement()를 알아야 할까?

1. JSX의 동작 이해

JSX는 HTML처럼 보이는 코드지만 사실 자바스크립트로 변환 된다.
예를 들어, 아래 JSX 코드:

const element = <h1 className="gretting">Hello, world!</h1>;

는 다음과 같이 변환 된다:

const element = React.createElement('h1', { className: 'greeting } , 'Hello, world!');

2. 리액트의 핵심 원리

리액트는 Virtual DOM을 사용한다. createElement()는 리액트가 Virtual DOM을 구성하는 핵심 함수이다.
Virtual DOM은 실제 DOM을 효율적으로 업데이트하기 위해 사용되며, createElement()가 그 기반이다.

3. JSX 없이 리액트 사용

JSX는 편리하지만 필수는 아니다. createElement()를 직접 사용하면 JSX 없이도 리액트 컴포넌트를 사용할 수는 있다.

4. 디버깅

JSX로 작성된 코드가 어떻게 작동하는지 이해하면, 디버깅 시 내부 동작을 더 쉽게 파악할 수 있다.

React.createElement() 함수의 구조와 파라미터 설명

React.createElement() 함수는 다음과 같은 구조를 가진다.

React.createElement(type, [props], [...children])

1. 첫 번째 파라미터: type

요소의 유형을 지정한다.
HTML 태그: 'div', 'span', 'h1' 등.
리액트 컴포넌트: MyComponent 같은 사용자 정의 컴포넌트

예:

React.createElement('h1', null, 'Hello, world!'); // <h1>Hello, world!</h1>
React.createElement(MyComponent, null); // <MyComponent />

2. 두 번째 파라미터: props

해당 요소의 속성(properties)을 정의한다.
객체 형태로 전달되며, className, id, onClick 같은 속성을 포함한다.

예:

React.createElement('div', { className: 'container', id: 'main' });
// <div class="container" id="main"></div>

3. 세 번째 파라미터: children

해당 요소의 자식 요소를 정의한다.
문자열, 숫자, 또 다른 React 요소 등을 포함할 수 있다.
여러 개의 자식을 전달할 경우 배열 형태로 전달 된다.

예:

React.createElement('div', null, 'Hello', React.createElement('span', null, 'World'));
// <div>Hello<span>World</span></div>

createElement()로 작성된 예제 코드

JSX로 작성:

const element = (
  <div className="greeting">
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </div>
);

React.createElement()로 작성:

const element = React.creteElement(
  'div',
  { className: 'greeting' },
  React.createElement('h1', null, 'Hello, World!'),
  React.createElement('p', null, 'This is a paragraph.')
);