[React 기초] JSX와 바벨(babel)은 무엇인가?

*JSX는 무엇인가?

JSX(Javascript + xml)는 자바스크립트에 대한 확장 구문으로서, 리액트에서 element(요소)를 제공해 줍니다.(객체를 표현)

리액트는 JSX문법을 사용하며 브라우저에서 실행되기 전에 바벨(babel)을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

참조 : https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

[JSX 문법 규칙]

-html에서 class값을 정의할 때는 <div class="container"></div>와 같이 하면 되었지만
class라는 단어가 ES6의 클래스 문법과 겹치는 예약어이기 때문에 JSX에서는 className이라는 단어를 사용합니다.

-반복문 예약어와 겹치는 for는 htmlFor로 사용합니다.
(두 개의 단어 이상이 합쳐졌을 때는 두 번째 단어부터 첫 스펠링은 대문자로 씁니다. 카멜 표기법 기준)
(구분 잘할 것!)

카멜 표기법:
https://ko.wikipedia.org/wiki/%EC%B9%B4%EB%A9%9C_%ED%91%9C%EA%B8%B0%EB%B2%95

-주석 처리법 html에서 주석은 <!-- 내용 --> 이지만
JSX에서는 {/* 내용*/}으로 표현합니다. { }를 빠뜨리지 않도록 주의합니다.

-html의 사용자 요소는 <my-element>로 표기했지만 React-JSX의 표기법은 <MyElement/>와 같이
반드시 첫 글자는 대문자로 적어야 됩니다. 그렇지 않으면 React와 JSX는 html의 요소로 인식하게 됩니다.

 

리액트에서 어떤 요소를 추가 할때는 

const element = React.creatElement('h1', {className: 'greeting'},'hello, world!');

위와 같이 추가할 수 있는데 괄호안의 규칙도 외워야 될뿐더러 익숙하지 않은 방식입니다.

이것을 JSX를 이용하면 html에서 요소를 추가하는것과 같이 쉽게 쓸 수 있습니다.

const element = <h1 className = 'greeting'> hello, world! </h1>

하지만 JSX는 브라우저에서 읽어오지 못하기 때문에 babel을 이용해서 JSX로 적은 코드를
브라우저가 이해할 수 있는 형태로 바꿔줘야 됩니다.

 

*바벨(babel)은 무엇인가?

바벨은 6to5라는 이름을 가지고 있는데 이건 6에서 5로 보낸다. 즉, ES6를 ES5로 바꿔주는 것을 말합니다.

과거의 브라우저는 ES6를 제대로 호환하지 못했고 최신의 문법을 읽어올 수 없었습니다.

JSX도 그중 하나였고 이러한 문제점을 해결하기 위해 바벨이라는 컴파일러 도구를 만들었습니다.

바벨은 ES6를 ES5로 바꿔 브라우저가 읽기 쉬운 코드로 변환해주고 이것을 바탕으로

개발자는 최신문법을 사용하면서도 여러 브라우저에서 작동할 수 있는 코드를 작성할 수 있게 된 것입니다.

참조 : https://babeljs.io/docs/en/

Babel · The compiler for next generation JavaScript

 

리액트 - JSX - 바벨은 절친 같은 사이!