JSX

출처 : 노마드코더 - ReactJS로 영화 웹 서비스 만들기

 

JSX 란

- JavaScript를 확장한 문법입니다.

- 모습은 HTML과 유사합니다. 그래서 JSX로 React 요소를 만드는 게 개발자들 입장에서 굉장히 편합니다.

- React.createElement() 는 많이 사용하지 않는 편입니다. 봤을 때 JSX보다 이해하기 어렵기 때문입니다.

- JSX의 변수는 대문자로 시작합니다. 소문자로 적어서 HTML의 태그와 헷갈리면 안 되기 때문입니다.

//React로 작성
React.createElement(
  'h3', 
  {id: 'title', onClick: ()=>{console.log('Click!')}, 
  'Title'
);

//JSX로 작성
const Title = (
  <h3 id="title" onClick={()=>{console.log('Click!')}>
    Title
  </h3>
);

 

 

Babel

- JSX를 브라우저가 이해할 수 있는 코드로 변환시켜주는 역할을 합니다.

<script src='https://unpkg.com/@babel/standalone/babel.min.js'></script>
<script type='text/babel'>
  //JSX 코드
</script>