JSX를 자바스크립트로 작성해보기

import Expenses from "./components/Expenses";

const expenses = [
	{},
	{}
];

const Expense = (props) => {
	return (
		<div>
			<h2>안녕하세요.</h2>
			<Expenses items={expenses} />
		</div>
	);
}

 

 

위 코드를 순수 자바스크립트로 작성한다면

import React from 'react';

const Expense = (props) => {
	return React.createElement(
		‘div’,
        {},
		React.createElement(‘h2’, {}, ‘안녕하세요.’),
		React.createElement(Expenses, { items: expenses })
);

옛날엔 .createElement 메서드를 사용하려면 모든 페이지에서 react를 임포트 해줘야 했지만 지금은 아니다.

프로젝트 셋업할 때, 알아서 JSX로 변환해준다.

 

실제 변환하면 return React.createElement(); 이렇게 한개만 변환할 수 있다. 하나 이상을 반환할 수 없다.

 

return

React.createElement()

React.createElement()

나란히 있는 각각 다른 두 개의 요소를 한번에 반환 못해서 래퍼가 필요해서 무조건 return 안에 하나의 <>로 감싸줘야 한다.

• 배열을 반환할 순 있음

변환이 어떻게 이루어 지는지, 리액트가 어떻게 작동하는지 알아야 한다.