[react] 바벨(Babel)이란?

JSX란 React 스크립트 안에서 일반적인 HTML의 형태의 문법을 사용할 수 있도록 자바스크립트를 확장한 문법인데, JSX는  JavaScript 코드가 아니기 때문에 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일해주어야 함. 이때 Babel이 사용됨.

 

Babel이란?

Babel은 자바스크립트 코드를 변환해주는 도구로 최신 자바스크립트 문법으로 작성된 코드를 이전 버전의 브라우저에서도 실행될 수 있도록 변환해주는 트랜스파일러(transpiler).

 

왜 Babel이 필요할까?

ES6(ECMAScript 2015) 이후로 자바스크립트는 매년 새로운 기능이 추가되고 있으나 모든 브라우저가 최신 자바스크립트 문법을 완벽하게 지원하는 것은 아니기 때문에, 최신 문법을 사용하여 개발된 코드를 모든 사용자가 이용할 수 있도록 변환해주는 것이 필요함. Babel은 최신 자바스크립트 문법은 코드를 더욱 간결하고 효율적으로 작성할 수 있도록 해주기 때문에 Babel을 사용하면 최신 문법으로 개발하면서도 다양한 브라우저를 지원할 수 있으므로 코드 유지보수가 훨씬 편리함.

 

Babel이 하는 일

• 코드 파싱: Babel은 소스 코드를 분석하여 문법 구조를 파악
• 코드 변환: 파싱된 코드를 이전 버전의 자바스크립트 문법으로 변환 (ex. ES6의 let과 const 키워드를 ES5의 var 키워드로 변환, 화살표 함수를 일반 함수로 변환 등)
• 플러그인: 다양한 플러그인을 통한 기능 확장 (ex. JSX를 JavaScript로 변환, TypeScript를 JavaScript로 변환 등)

 

 

Babel 예시

아래와 같이 Babel을 설정하면, @babel/preset-env 플러그인을 통해 현재 사용하고 있는 브라우저 환경에 맞춰 코드를 자동으로 변환함.

# package.json에 Babel 관련 패키지 설치
npm install --save-dev @babel/core @babel/preset-env

# .babelrc 파일 생성
{
  "presets": ["@babel/preset-env"]
}

 

 

 

결론

Babel은 현대적인 자바스크립트 개발 환경에서 필수적인 도구로써 Babel을 사용하면 최신 자바스크립트 문법을 활용하여 생산성을 높이고, 다양한 브라우저에서 작동이 가능하도록 조금 더 쉽게 개발을 할 수 있음.