Babel과 JSX

회사 프로젝트에 투입되어 개발 환경을 세팅하면서 오류가 났었는데, babel 어쩌구 저쩌구 버전이 안 맞다는 오류가 발생했던 적이 있다. 이때 이 babel이라는 걸 처음 접하고 이게 뭔가 했는데, 그 babel에 대해서 파헤쳐보자.

Babel 이란?

• JSX와 ES6를 자바스크립트 안에서 사용할 수 있게 해준다.

JSX 란?

• JS + XML. 다음과 같은 자바스크립트의 확장 문법이다.

  <button type='submit' onClick={() => {handleClick}>{isLiked ? 'Liked' : 'Like'}</button>
  

• UI 다루는 코드의 가독성을 높이기 위해 고안된 문법이다. createElement()를 직접 사용하는 방식은 가독성은 개나 줘버린 UI 코드를 만들게 된다.

  React.createElement('h1', null, 'Hello world')
  ---> <h1>Hello world</h1>
  

• JSX는 브라우저 종류, 버전에 따라서 지원을 안하기도 한다. 그러면 지원하지 않는 브라우저를 위해서 코드를 새로 짜야하는가? 새로 짤 수도 있지만, 너무 힘든 작업이니까 우리는 대안을 찾는다. Babel을 사용한다. 리액트의 JSX 문서에서도 이를 권장한다.

정리

• Babel은 히브리어로 혼돈이라고 한다. 바로 위에서 말한 혼돈의 크로스 브라우징 문제를 해결할 수 있는 게 바벨이다.
• ES6 이상의 코드를 브라우저가 지원하는 적당한 하위 버전의 코드로 바꿔주는 것이 바벨의 주된 역할이다.