JSX(Javascript Syntax eXtension)

JSX란?

JSX는 자바스크립트의 확장 문접이다. 리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다.

 

JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있습니다.

 

리액트에서 JSX 사용은 의무인가?

의무는 아니지만 자바스크립트 안에서 UI 작업을 하는데 너무 편리하기 때문에 React를 사용할 때는 대부분 JSX를 사용한다.

 

리액트에서 화면을 그리는 방식

리액트는 가상돔과 같은 리액트만의 방식을 통해서 화면에 렌더링을 해주기 때문에 보통 HTML을 parsing해서 화면에 보여주는게 아닌 다른 방식을 통해서 홤녀에 보여주게 된다. 그게 바로 React.createElement API를 사용해서 엘리먼트를 생성한 후(객체가 됨), 이 엘리먼트를  In-Memory에 저장한다. 그리고 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려준다.

 

모든 요소를 다 createElement API를 사용하면 너무 복잡해진다. createElement API를 손수 사용해서 요소를 생성하려면 너무 복잡하기 때문에 JSX와 바벨의 도움을 받아서 이 문제점을 해결해준다.

 

JSX는 createElement를 쉽게 사용하기 위해 사용한다. 모든 UI를 만들 때 마다 createElement를 사용해서 컴포넌트를 만들 수는 없다. 그러기에 JSX를 사용한 후 그걸 바벨이 다시 createElement로 바꿔서 사용한다.

 

JSX를 사용하면서 주의해야할 문법들(규칙들)

JSX를 사용하면서 지켜줘야할 규칙들이 많다. 처음으로는 JSX는 컴포넌트에 여러 엘리먼크 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 한다.