JSX란

<aside> 🏛️ 근본적으로 JSX는 React.createElement 함수에 대한 문법적 설탕을 제공할 뿐이다.

</aside>

• JSX(Javascript XML)는 Javascript에 XML을 추가 확장한 문법이다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
• JSX는 리액트로 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.

JSX의 장점

• XML 형식과 문법이 유사하여 중첩된 태그들의 구조를 파악하기 쉽다.
• createElement 등의 태그를 만드는 문법을 사용하지 않고 직접 태그들을 선언하기 때문에 코드의 양이 감소한다.
• Javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움을 준다.

JSX 규칙

(1) 반드시 부모 요소 하나가 감싸는 형태여야 한다.

• Virtual DOM에서 컴포넌트의 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙때문에

(2) class 대신 className

(3) React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.