ECMAScript
JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어다.
대부분의 웹 브라우저에서는 JavaScript를 볼 수 있는데 브라우저마다 ECMAScript 지원되는 것이 다르기 때문에 조금씩문법에 대해 호환성이나, 속도 차이가 날 수 있다.
수행 능력과 지원되는 ECMAScript가 다르기 때문에 사람들은 일반적으로 JavaScript 호환성보다 ECMAScript 호환성이라는 단어를 더 사용한다.
바벨
바벨은 ES6 사양으로 작성된 코드를 함수적으로 동일한 ES5 코드로 바꿔준다. 대부분의 주요 브라우저는 ES5까지는 지원을 하기 때문에, 개발자들은 브라우저 간 호환성 걱정을 덜 수 있었다.
이전에 인터넷 익스플로어는 ES6가 지원되지 않아 ES5를 사용했는데 그 역할을 바벨이 했다.
또한 바벨은 최신 문법을 이전 세대의 코드로 호환해주는 기능외에도 다양한 기능을 제공하는데 그중 하나가 JSX 언어를 브라우저가 읽기 쉬운 ES5 코드로 변환해준다.
이를통해 개발자는 최신문법을 사용하면서 여러 브라우저에서 작동될 수 있는 코드를 작성할 수 있다.
이 때문에 리액트와 JSX, 바벨은 서로에게 중요한 존재이다.
JSX : (HTML 태그를 변수로 할당하고, 호출하고, 리턴할 수 있는 확장 문법)
참고문헌
리액트와 바벨과 JSX의 관계
리액트를 이제 시작하는 분들을 위한 쉬운 설명 | 리액트를 처음 배울 때 바벨과 JSX를 개념적으로 배웁니다. 제 경우엔 이 부분이 쉽게 이해가 가질 않았어요. 그래서 실제적인 예를 보면서 바
brunch.co.kr
야무의 React 러닝 가이드
React 프레임워크에 관한 친절한 러닝 가이드!
yamoo9.github.io
.
'Front-End > React' 카테고리의 다른 글
| Hook이란? ( useState, useEffect, useContext ) (0) | 2023.02.27 |
|---|---|
| CRA 와 VITE (0) | 2023.02.25 |
| Props, props drilling이란? ( + key props) (0) | 2023.02.15 |
| (React) 컴포넌트/엘리먼트 차이, JSX란? (0) | 2023.02.15 |
| SSR, CSR 차이 + SPA, MPA (0) | 2023.02.15 |
