createElement 이해하기

createElement 함수의 구조는 다음과 같다.

 

React.createElement(component, props, ..children) => ReactElement

 

component

일반적으로 문자열이나 리액트 컴포넌트를 사용한다

인수가 문자열이면 HTML 태그에 해당하는 돔 요소가 생성된다.

예를 들어, 문자열 p를 입력하면 HTML p태그가 생성된다.

 

props

컴포넌트가 사용하는 데이터를 나타낸다. 돔 요소의 경우 style, className 등의 데이터가 사용될 수 있다.

 

children

해당 컴포넌트가 감싸고 있는 내부의 컴포넌트를 가리킨다.

 

ex_

 

<div>

    <p>hello</p>

    <p>world</p>

</div>

 

createElement(

    'div',

    null,

    createElement('p', null, 'hello'),

    createElement('p', null, 'world'),

)

 

위의 html 코드를 아래의 코드로 동일하게 만들 수 있다.

 

대부분의 리액트 개발자는 createElement를 직접 작성하지 않는다.

일반적으로 babel의 도움을 받아서 JSX문법을 사용한다.

이는 createElement 함수보다는 JSX 문법으로 작성하는 리액트 코드가 훨씬 가독성이 좋기 때문이다.