JSX란?

리액트에서 함수형 컴포넌트를 만들어주고, 렌더링 해주는 코드를 말한다. 

 

function App 안을 보면 html 코드처럼 보이기도 하면서, js 같기도 해보인다.

이러한 코드를 jsx라고 부른다.

 

예를 들어 

function App() {

 return (

  <div>

    Hello <b>react</b>

  </div>

 );

}

 

이렇게 작성된 코드는 다음과 같이 변환됩니다.

 

function App() {

  return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));

}

 

만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편하겠지요? jSX를 사용하면 매우 편하게 UI를 렌더링할 수 있습니다.

 

정리하자면, 제가 이해한 바로는 자바스크립트문법인 function 함수 코드내에서 

html 코드를 이용하는데 다시 이 html 코드 내부요소들 ( div, img, h1 등등 ) 을 렌더링시켜주는 방식의 코드와

자바스크립트 문법( const, return 문 등등 ) 안에서 html 코드를 넣어서 작동하게끔 하는 리액트의 코드형태를

JSX 라고 말하는듯 하여 보입니다. 

 

 

참고: 도서 '리액트를 다루는 기술' 중에서