1. JSX ?

JavaScript XML 의 약자로 React 에서 UI 요소를 작성하기 위한 JavaScript 확장 문법이다.

HTML 와 비슷한 문법으로 UI 를 작성할 수 있으며, 실제로는 JavaScript 이다.

아래 이미지와 같이 XML 형태로 코드를 작성하면 Babel 이 JavaScript 로 변환 해준다.

2. Babel ?

JavaScript 코드를 변환해주는 오픈 소스 도구이다.

보통 최신 JavaScript 문법을 이전 버전의 문법으로 변환하는 데 사용되며 범용적으로 개발자달의 JavaScript 환경에서 호환성을 확보하기 위해 필요하다.

React 와 함께 사용되는 경우, Babel 은 JSX 문법을 일반 JavaScript 로 변환한다. JSX 문법은 브라우저나 앱에서 직접 실행할 수 없기 때문에 Babel을 통해서 변환되어야 한다.