Junnnho

개발자들은 좋은 기능이 탑재된 최신버전의 ECMAScript로 개발하기를 원한다

그래서 개발할 때는 최신 버전의 ECMAScript를 사용하고

사용자에게 배포할때는 Javascript transcompiler 를 이용해서

변환된 코드를 생산해주는 transcompile이 가능한 것이 바로 babel

바벨(babel)은 자바스크립트 코드를 변환해주는 컴파일러다.

바벨을 사용하면 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법을 사용할 수 있다.

ES6가 막 나왔을 때는 대부분의 브라우저가 ES5만 지원하고 있었기 때문에 ES6문법을 사용할 수 없었다.

그때 바벨이 Es6 문법으로 작성된 자바스크립트 코드를 ES5 문법으로 변환해 줬다.

ES6 문법을 사용하고 싶어 하는 개발자가 많았기 때문에 바벨의 인기도는 높아졌다.

바벨은 자바스크립트 최신 문법을 사용하는 용도 외에도 다양하게 활용될 수 있다.

이를테면, 코드에서 주석을 제거하거나 코드를 압축하는 용도로 사용될 수 있다.

리액트에서는 JSX 문법을 사용하기 위해 바벨을 사용한다.

바벨이 JSX 문법으로 작성된 코드를 createElement 함수를 호출하는 코드로 변환해준다.

즉, JSX가 아닌 createElement 함수를 호출하는 것이 render 메서드의 기본이지만,

createElement는 가독성이 떨어지기 때문에 흔히 사용하는 JSX 문법으로 컴포넌트를 구현하게 되고,

자바스크립트 표준이 아닌 JSX 문법을 적용하기 위해 createElement 함수로 컴파일하여 돔에 렌더링하는 과정을 거친다.

이 컴파일 역할을 하는 것이 바벨(babel) 이다. 

바벨을 사용하기 위해서는 패키지 설치가 필요하다.

$ npm install @babel/core @babel/cli @babel/preset-react

@babel/cli에는 커맨드라인에서 바벨을 실행할 수 있는 바이너리 파일이 들어있다.

@babel/preset-react에는 JSX로 작성된 코드를 createElement 함수를 이용한 코드로 변환해주는 바벨 플러그인이 들어있다.

사용법은 다음과 같다

npx babel --watch src --out-dir . --presets @babel/reset-react 또는 ./node-modules/.bin/babel

위의 명령어를 실행하면 src 폴더에 있는 모든 자바스크립트 파일을 @babel/preset-react 프리셋을 이용해서 변환 후 현재 폴더에 같은 이름의 자바스크립트 파일을 생성한다. watch 모드로 실행했기 때문에 src 폴더의 자바스크립트 파일을 수정할 때마다 자동으로 변환 후 저장해준다.

createElement 함수의 구조는 다음과 같다.

React.createElement(component, props, ..children) => ReactElement

component

일반적으로 문자열이나 리액트 컴포넌트를 사용한다

인수가 문자열이면 HTML 태그에 해당하는 돔 요소가 생성된다.

예를 들어, 문자열 p를 입력하면 HTML p태그가 생성된다.

props

컴포넌트가 사용하는 데이터를 나타낸다. 돔 요소의 경우 style, className 등의 데이터가 사용될 수 있다.

children

해당 컴포넌트가 감싸고 있는 내부의 컴포넌트를 가리킨다.

ex_

<div>

    <p>hello</p>

    <p>world</p>

</div>

createElement(

    'div',

    null,

    createElement('p', null, 'hello'),

    createElement('p', null, 'world'),

)

위의 html 코드를 아래의 코드로 동일하게 만들 수 있다.

대부분의 리액트 개발자는 createElement를 직접 작성하지 않는다.

일반적으로 babel의 도움을 받아서 JSX문법을 사용한다.

이는 createElement 함수보다는 JSX 문법으로 작성하는 리액트 코드가 훨씬 가독성이 좋기 때문이다.