JSX(Javascript Syntax Extension)

: JS의 확장문법. 리액트에 적용

UI 나타낼 때 JS(logic)와 HTML 구조(markup)을 같이 사용하기에

기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현 가능

리액트에 JSX사용은 의무는 아니나 JS안에 UI작업을 하는데 편리하기에 거의 사용하는 편

리액트 paint 방식

1. React.createElement API 사용해 요소 생성(객체) 후 In-Memory에 저장

2. ReactDOM.render 함수 사용해 실제 웹 브라우저에 painting

=> JSX는 createElement를 쉽게 사용 가능

JSX 기본 문법 규칙

컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 한다