3. JSX와 Babel 

Babel이란 최신 버전의 JavaScript 코드를 지원하지 않는 이전 브라우저에서도 해당 코드가 동작하도록 하위 버전에 대한 호환성을 지원할 수 있게 해주는 트랜스파일러(Transpiler)

Babel의 기능은 크게 다음과 같음

1. 최신 버전의 JS 문법을 이전 버전의 문법으로 변환
2. JSX 문법 변환

1. 최신 버전의 JS 문법을 이전 버전의 문법으로 변환

1-1. ES6 브라우저별 지원 여부

1-2. ESNext 브라우저별 지원 여부

[!info] JS의 문법, 기능들을 각 브라우저 벤더사들이 지원하는지 비교 https://compat-table.github.io/compat-table/esnext/  https://caniuse.com/ 

1-3. Babel을 통해 변환된 코드

어떤 브라우저가 화살표 함수의 문법을 지원하지 않을 경우, 개발자는 이전 문법으로 직접 변경하지 않더라도 해당 브라우저에서는 Babel을 통해 함수 선언문 형태로 변환되어 동작하게 됨

2. JSX 문법 변환

JSX는 개발자의 편의성을 위해 제공된 확장 기능으로 볼 수 있기 때문에,

React를 거쳐서 브라우저에서 동작하도록 하기 위해서는 브라우저가 이해할 수 있는 순수한 JavaScript 코드로 변환되어야 함

2-1. Babel을 통해 변환된 코드