JSX란

JSX란 무엇인가요?

JSX(JavaScript XML)는 Javascript에 XML을 추가해 확장한 문법이다.
리액트로 프로젝트를 개발할 때 사용되므로 사실 공식적인 자바스크립트 문법은 아니다.
브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환되는 것이다.
하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
개발자가 JSX를 작성하기만 하면, 리액트 엔진은 JSX를 기존 자바스크립트로 해석하여 주며 이를 '선언형 화면' 기술이라고 한다.

*JSX을 사용하는 데에 따라야하는 몇가지 문법이 있다.

반드시 부모 요소 하나가 감싸는 형태여야 한다.
Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록
컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

JSX 안에서도 유효한 모든 자바스크립트 표현식을 사용할 수 있다.
자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.

if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트에서는
조건부에 따라 다른 렌더링 시 {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.