JSX

공식문서

const element = <h1>Hello, world!</h1>;

이처럼 함수와 html이 함께 있는 문법을 JSX라고 부르며, 자바스크립트 문법 확장이다.

JSX 는 리액트의 '요소'를 만든다. 그 요소가 어떻게 DOM에 렌더링 되는지 알아볼 필요가 있다.

Babel

Babel is a Javascript compiler

바벨은 자바스크립트의 컴파일러이다. ES6를 ES5로 바꿔주는 역할을 한다.

사용자의 브라우저 환경이 다양하여 여러버전의 자바스크립트 버전이 공존하는데 과거의 브라우저는 당시 선형 문법인 ES6를 제대로 호환하지 못한다.

그래서 바벨과 같이 ES6를 ES5로 바꿔주는 도구가 있어야 오래된 브라우저에서도 사용이 가능하다.

polyfill

폴리필은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미한다

브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워 넣는다고 해서 폴리필이라 칭한다.

바벨은 이러한 폴리필을 쉽게 지원하기 위해 babel-polyfill 기능을 지원한다.

바벨이 자바스크립트 문법을 변환하는 transpiler 역할을 한다면 폴리필은 프로그램이 처음 시작될 때 지원하지 않는 기능들을 추가해준다.

즉, 바벨은 컴파일시 실행되고 폴리필은 런타임에 실행되는 것이다.