[React] JSX(JavaScript syntax extension)란?

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

 

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

 

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

 

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

의무는 아니지만 자바스크립트 안에서 UI 작업을 하는데 너무 편리하기 떄문에 리액트를 사용할 때는
거의 모든 사람이 JSX를 사용한다고 합니다..

 

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

리액트는 가상돔과 같은 리액트만의 방식을 통해서 화면에 랜더링을 해주기 떄문에
보통 HTML을 parsing해서 화면에 보여주는게 아닌 다른 방식을 통해서 화면에 보여주게 됩니다.

그게 바로 React.createElement API를 사용해서 엘리먼트를 생성한 후(객체가 된다) 이 엘리먼트를

In-Memory에 저장합니다.

그리고 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려줍니다.

 

모든 요소를 다 createElement API 를 사용하면 너무 복잡해집니다.

createElement API를 손수 사용해서 요소를 생성하려면 너무 복잡하기 때문에 

JSX와 babel의 도움을 받아서 만듭니다.

 

JSX는 createElement를 쉽게 사용하기 위해 사용

모든 UI를 만들때 마다 createElement를 사용해서 컴포넌트를 만들 수는 없습니다.

그러기에 JSX를 사용한 후 바벨이 그걸 다시 createElement로 바꿔서 사용합니다.

 

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

JSX를 사용하면서 지켜줘야 할 규칙들이 많습니다.

첫번째는 JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면, 반드시 부모 요소 하나로 감싸줘야 합니다.

 

예시

 

추후 추가하겠습니다.