*JSX

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바베을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

*JSX 문법

감싸인 요소

import React from 'react';

function App() {
	return (
    	<div>
      		<h1><리액트 안녕/h1>
      	</div>
    );
}

리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸 주어야 하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 입니다.