JSX는 무엇일까? (Feat. babel)

🐛 도입

• 리액트(React)는 보통 HTML과 유사한 JSX 코드로 작성하는 경우가 대부분입니다.
• 이 JSX의 편리함 때문에 리액트를 좋아하는 사람도 많지만, 이 JSX 때문에 리액트를 싫어한다는 사람도 많다고 합니다.
• 이번 블로깅에서는 이러한 JSX와 JSX를 변환(transpile) 해주는 babel에 대해서 알아보도록 하겠습니다.

 

📝 JSX가 뭘까?

• JSX를 설명하는 리액트 문서를 바탕으로 살펴보도록 하겠습니다.

// 아래 변수 선언을 살펴보자

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

• 위 선언문을 보면 문자열도 HTML도 아닙니다.
• 이 문법을 JSX라고 부르며, JSX는 HTML 태그를 변수로 할당하고, 호출하며, return 할 수 있는 확장 문법이라고 볼 수 있습니다.
• 이를 통해 HTML 변환을 위한 코드 (React.createElement)를 호출하지 않고도 HTML 태그를 작성하여, 변수에 넣거나 return 할 수 있기 때문에, 간단하고 편리하게 리액트 컴포넌트를 정의하고 UI를 표현할 수 있습니다.

 

📝 바벨(babel)은 뭘까?

• 바벨의 원래 이름은 '6to5'라는 이름이였으며. 이름에서 짐작 가능하듯이 ES6(ECMAScript 6)를 ES5(ECMAScript 5)로 바꿔주는 역할을 하였습니다.
• 자바스크립트는 다양한 버전이 존재하며, 과거 브라우저는 당시 최신 문법이었던 ES6를 제대로 호환하지 못하였습니다.

브라우저별 ES6를 지원한 시점

• 2015년 ES6가 나왔음에도, 크롬이나 파이어폭스 등의 브라우저는 ES6를 지원하지 않았으며, 그러다 보니 바벨과 같이 ES6를 ES5로 바꿔주는 도구가 있어야만 오래된 브라우저에서도 ES6문법을 사용 할 수 있었던 것이죠.
• 바벨은 위와같은 최신 문법을 이전 세대의 코드로 호환해주는 기능 이외에도 JSX로 작성된 코드를 변환할 때도 사용됩니다.
• 바벨을 사용하면 JSX를 브라우저가 읽기 쉬운 ES5코드로 변환해주며, 이를 바탕으로 개발자는 최신 문법을 사용하면서 동시에 여러 브라우저에서 작동될 수 있는 코드를 작성 할 수 있습니다.

 

🌱 결론

• 리액트에게 있어 JSX와 바벨은 뗄레야 뗄수 없는 관계라고 할 수 있습니다.
• 요약하자면, JSX는 리액트에서 컴포넌트를 정의하는 데 사용되는 특별한 자바스크립트 확장 문법이며, Babel은 이 JSX 코드를 브라우저에서 실행 가능한 JavaScript 코드로 변환시켜주는 도구 라고 할 수 있습니다.