[ React ] JSX (Javascript syntax extension)

JSX (Javascript syntax extension)

 

1. JSX (Javascript syntax extension)이란 ?

JSX를 이용하여 UI를 나타낼 때 자바스크립트 (logic)와 HTML구조를 같이 사용할 수 있기 때문에 

기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현 할 수 있습니다.

리엑트에서 JSX를 사용하지 않을 수도 있지만, 편리하기 때문에 사용을 권장합니다.

만약 JSX를 사용하지 않는다면 리엑트에서 제공하는 React.createElement API를 사용해야한다.

React.createElement API
엘리먼트 객체를 생성 후 IN-Memory에저장 ReactDOM.render 함수를 사용해 실제 웹 브라우저에 그려준다 .

 

 

2. JSX 사용시 주의해야 하는 문법(규칙)

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