• 목차

1. JSX-intro

Babel

초기의 Babel 이름은 six to five → Es6 버전의 js를 Es5으로 바꿔준다는 뜻

브라우저 벤더사마다 사용하는 Js 버전이 달랐는데 익스플로어는 Es5를 사용하고 나머지는 Es6를 사용하던 시절이 존재했다.

근데 우리나라는 대부분 익스플로어를 사용해서 어쩔 수 없이 Es5로 개발을 해야하는데 Es6에서 편리한 문법들이 많이 나와서 개발을 Es6로 하고 익스플로어 배포를 위해 Es5로 교체하는 방식으로 진행

Babel 적용 방법

• Babel을 사용하기 위해 CDN으로 가져와야 함

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

• Babel 적용
  • script 태그 선언 시 type 설정 필요

<script type="text/babel">
    const helloworld = <h1>Hello World!</h1>;
   
    ReactDOM.createRoot(document.getElementById('root')).render(helloworld);
</script>

JSX → JavaScriptXml

createElement를 이용해 엘리먼트를 정의하면 복잡하기도 하고 가독성도 좋지 않다.

그래서 리액트 팀은 ReactElement를 정의하는 간편한 방법으로 JSX문법을 제공한다.

자바스크립트를 확장한 문법으로, ReactElement를 Xml 문법 형식으로 정의할 수 있는 방법

• XML 방식으로 적지만 내부적으로 Js로 변환됨
• Html 태그가 아닌 XML 태그라서 반드시 태그에 대한 시작과 종료가 필요함