React.createElement 와 JSX 의 기본개념

gak·2023년 1월 1일
0

리액트 교과서

목록 보기
2/2

React.createElement 개념

React 클래스에 createElement 라는 static public method 를 써서 DOM 을 만들 수 있다.
createElement 의 명세는 아래와 같다.

React.createElement(component, props, ...children); 

React.createElement 구현

간단하게 구현을 해보면 아래와 같을 것 같다.

function createElement(component, props, ...children) {
  
  const dom = document.createElement(component);
  if (!dom) {
    alert('유효하지 않은 component 입니다.');
  }
  
  // # 1 
  Object.assign(dom, props);
  // # 2
  for (const key of Object.keys(props)) {
    dom[key] = props[key];
  }
  
  for (const child of children) {
    dom.appendChild(child);
  };
  
  return dom;
}

createElement 의 문제점

createElement 로 View 를 만들면 가독성이 너무 나쁘고 읽기어렵다.
자연스레 디버깅도 어려워짐.

ReactDOM.render(
  React.createElement('h1', null,
                      React.createElement('h2', null, '사과'),
                      'Hello World',
                      React.createElement('div', {background: 'red'},
                                          React.createElement('h1', null, 'Bye'))
                      ),

딱봐도 읽기 싫게 생겼다.


JSX 의 사용

편하게 읽고 쓸 수 있도록 JSX 가 도입되었다.
JSX 는 Syntax Sugar 로, 쉬운 사용성을 위해 도입되었다.
JSX 는 Babel 을 활용해 Js 로 transpile 해야한다.
즉, JSX 를 React.createElement() 로 transpile 한 뒤 사용하는 것이다.

위 예시 코드를 JSX 를 사용하면 아래와 같이 바뀐다

ReactDOM.render(
  <h1>
  	<h2>사과</h2>
  	HelloWorld
  	<div background='red'>
  		<h1>Bye</h1>
  	</div>
  </h1>

XML 형식으로 createElement 를 썼을때보다 굉장히 직관적이다.
이는 코드의 유지보수 측면에서 유리하고 이해하기 쉬운 코드를 짤 수 있다는 장점이 있다.


레퍼런스

리액트 공식문서 - createElement
리액트교과서

profile
Hello. I'm Front-End Developer Trying to Create Valuable Things.

0개의 댓글