[React] 바벨 Babel 에 대해서 알아보자.

 

바벨이란 무엇인가 ??

이두근을 발달시키기 위해 운동하는 바벨컬이 아닌 React 개발할때 소스코드를 가독성이 좋게 바꿔주는 대표적인 자바스크립트 '트랜스파일러' 입니다.

 

여기 한가지 예시가 있습니다.

return React.createElement('button',{onClick: ()=> this.setState({linked:true})}, 'Like');

위에있는 소스코드는 Babel이 나오기 전 코딩했던 방식이였습니다.

 

리액트에서 jsx문법을 createElement 함수를 호출하는 코드를 변환하기 위해서 Babel를 사용하기 시작했습니다.

※ jsx란? : 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드를 변환시켜 준다. 

 

바벨을 적용하게 된다면 아래 소스코드를 위에있는 소스코드로 변경을 하게 해줍니다.

 return (
        <button onClick={() => this.setState({liked: true})}>
          Like
        </button>
      );

 

이와 같이 태그를 사용하여 가독성이 좋아지며 코딩하기도 더 편해집니다.

 

바벨 Babel

• 자바스크립트 안에서 태그를 사용할 수 있도록 도와주는 패키지
• JSX를 JS로 변환해주는 프로그램중 가장 대표적인 프로그램