JSX란

개요

• JSX 는 JavaScript 문법을 확장한것으로 JavaScript + XML/HTML로 볼 수 있다

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

• JSX는 React “엘리먼트(element)”를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체이다.

• React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다. 또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다

  
  

[JSX를 사용하면 아래와 같이 XML, HTML코드를 변수에 넣는것도 가능하다]

JSX를 사용하는 이유

(1) JSX에는 div, span 같은 HTML 태그를 사용할 수 있으며, 개발자가 만든 컴포넌트도 JSX 안에서 작성할 수 있다

(2) JSX는 HTML 코드와 비슷하기 때문에 일반 자바스크립만 사용한 코드보다 더 익숙하며 가독성이 좋다