TIL 53. React의 return은 왜 하나의 태그로 감싸주어야 하는가.

react로 프로젝트를 하다보면 return부분은 하나의 태그로 감싸줘야한다.

return (
	<div>
    	<h1>Title!!</h1>
       	<Component item={item} />
	</div>
	)

위 jsx코드는 React의 createElement로 만들어진다.
createElement를 써서 위 코드를 바꿔보면 아래와 같다.

return React.createElement(
  'div',
  {}, 
	React.createElement('h1', {}, 'Title!!'),
	React.createElement(Component, {item: item})

React.createElement의 첫번째 인자는 태그가 온다. 두번째는 속성이 오고, 세번째는 컨텐츠가 온다.

좀 더 복잡한 예시는 아래와 같다

<div>
  <div>
    <h1>h1태그</h1>
    <ul>
      <li>li태그 1</li>
      <li>li태그 2</li>
    </ul>
   </div>
</div>

ReactDOM.render(
  React.createElement(
    'div',
    null,
    React.createElement(
      'div',
      null,
      React.createElement('h1', null, 'h1태그'),
      React.createElement(
        'ul',
        null,
        React.createElement('li', null, 'li태그 1'),
        React.createElement('li', null, 'li태그 2')
      )
    )
  ),
  document.querySelector('#root')
);

그래서, 만약 jsx코드에서 같은 레벨의 태그가 두 개 이상 존재한다면,
React.createElement를 사용한 코드의 return은 두개가 될 것이고, 반환할 수 없게 된다.