♣ React에는 무조건 사용되는 babel에 대해서 알아보자!
◆바벨이란 무엇인가?
- ES2015+ 코드들을 현재 및 이전 브라우저나 환경에서 이전 버전과 호환이 가능한 Javascript 버전으로 변환하는 데 사용되는 컴파일러 또는 트랜스파일러라고 말할 수 있다.
◆바벨이 제공하는 주요 기능을 알아보자
1. 변환구문(Transform syntax)
최신 자바스크립트 문법을 구버전에서도 동작할 수 있도록 변환하는 과정이다.
이 과정이 필요한 이유는??
프론트엔드분야는 엄청나게 빠른 속도로 변화하지만 브라우저에서는 바로 적용이 어려울 수 있다
변경된 문법이 있다면 그 문법을 브라우저에서 지원을 안 해 브러우저 입장에서는 이게 무슨 말인데?라고 할 수도 있기 때문이다.
그래서 우린 바벨이라는 트렌스파일러를 통해 자바스크립트를 구버전으로 변환하는 과정을 수행할 수 있도록 사용한다고 생각한다.
즉, 변환구문은 최신문법을 브라우저가 이해할 수 있는 코드로 바꿔주는 것을 의미한다.
아래 예시 코드를 통해 알 수 있는 내용은 const ☞ var / 템플릿 리터럴(`) ☞ 문자열 연결 / 화살표 함수 ☞ 일반함수 표현식으로 변환되었다
또한 리액트에서 사용되고있는 JSX문법 또한 바벨을 통해 React.createElement로 변환된 것을 확인할 수 있다.
// 변환구문에 대한 예시코드
// ES6+ 코드
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
// Babel이 변환한 ES5 코드
var greet = function(name) {
console.log("Hello, " + name + "!");
};
// JSX 코드
const element = <h1>Hello, world!</h1>;
// Babel이 변환한 ES5 코드
const element = React.createElement("h1", null, "Hello, world!");
2. 대상환경에서 누락 된 폴리필(Polyfill)
core-js를 사용하여 구버전 브라우저에서 지원하지 않는 기능을 사용하여 구현이 누락된 부분을 새로운 기능을 메꾼 코드
바벨은 문법만 변환할 뿐 새로운 기능을 추가하지 않는다.
하지만 ES6+에서 새롭게 추가된 기본 내장 객체(Promise, Map, Set...)를 지원하지 않는 브라우저가 존재하기 때문에 이를 해결하기 위해서 폴리필을 사용하여 해당 기능을 브라우저에서도 사용할 수 있도록 만들어준다.
아래코드를 확인해 보면 ES6에서 추가된 includes()를 사용하는데
이때 includes()를 지원되지 않는 브라우저에서 폴리필을 통해 두 번째 코드처럼 변환해서 브라우저에서 정상작동을 할 수 있게 해 준다.
// 폴리필 대한 예시코드
// ES6 코드 (구버전 브라우저에서 작동하지 않음)
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
if (!Array.prototype.includes) {
Array.prototype.includes = function(value) {
return this.indexOf(value) !== -1;
};
console.log("폴리필 적용 완료!");
}
3. 소스 코드 변환(Source code transformations)
기존 코드 스타일을 JavaScript 최신 문법이나 새로운 패턴으로 변환
변환구문이랑 비슷하다고 느낄 수 있지만 다르다!
브라우저 지원과 관계없이, 코드 품질을 높이거나 API 변경에 대응하는 용도로 사용된다고 생각하면 된다.
아래 코드를 통해 확인할 수 있는 점은
React 16 이후부터는 함수형 컴포넌트와 useState, useEffect 등의 Hook을 사용하는 것이 추천되었기 때문에 클래스형이
함수형과 hook을 사용한 형태로 변환된 것을 확인할 수 있다.
// 소스 코드 변환 예시코드
// 리액트 클레스컴포넌트형
class MyComponent extends React.Component {
render() {
return <h1>Hello</h1>;
}
}
// 리액트 함수형 컴포넌트
function MyComponent() {
return <h1>Hello</h1>;
}
// 변수 선언 var사용
var x = 10;
function sayHello() {
var message = "Hello";
console.log(message);
}
// let으로 변환
let x = 10;
function sayHello() {
let message = "Hello";
console.log(message);
}
이번에 바벨을 열심히 찾아보면서 모던 자바스크립트 튜토리얼에서 '모던 자바스크립트를 이용해 스크립트를 작성하려면 트랜스파일러와 폴리필은 필수입니다.'라는 글을 본 적이 있다. 발전속도가 빠른 환경 속에서 동일한 결과물을 내기 위해서일까?라는 생각이 들면서 프로젝트에 바벨이 있으면 이제 왜 있구나 있어야 하는구나라고 생각할 수 있을 거 같다!