JSX와 Babel

JSX는

자바스크립트의 확장 문법이며, XML과 매우 비슷하게 생겼다. 

또한 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 

 

JSX의 형식은 아래와 같다.

function App(){
    return (
        <div>
            Hello <b>react</b>
        </div>
    );
}

function App(){
    return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}

 

매번 컴포넌트를 랜더링할 때마다 JSX코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야한다면 매우 번거롭을 것 같다. JSX를 이용하여 편리하게 코딩할 수 있다.

 

어느 방식을 이용해여 개발해도 무방하지만 편리하게 개발을 하기위해서 JSX를 사용한다고 생각하면된다.

 

 

 

Babel은

JavaScript Compiler로써 특정언어를 다른 프로그램언어로 옮겨주는 프로그램이다.

즉 JSX코드를 JavaScript가 이해할 수 있는 표현으로 바꿔주는 역활을 해준다고 보면된다.

 

Babel을 사용 하기 위해서는 아래의 코드를 추가해줘야한다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

 

 

 

 

 

위의 글은 '리액트를 다루는 기술' 책을 참고하여 정리된 내용입니다.