[코딩일기] React function return이 항상 1개 태그만 가능한 이유

Function return을 할 때, 항상 <div>로 감싸서 한 개의 태그만 리턴하는 이유는,

JSX를 사용하지 않은 React의 문법 때문이다.

 

 

return (

   <div>

      <h2>Hello</h2>

      <NewExpenseItem expenses={expenses} />

   </div>

);

 

[JSX를 사용한 코드]

 

 

return React.createElement(

   "div", //만드는 태그

   {}, //속성

   React.createElement("h2", {}, "Hello"), // 자식요소

   React.createElement(NewExpenseItem, { expenses: expenses })

);

 

[JSX를 사용 안 한 코드]

React.createElement(만들 태그, 속성, 자식요소)

해당 문법에서 '만들 태그'는 1개만 들어가기 때문에, JSX 문법을 사용할 때, 1개의 태그만 리턴 가능하다.