JSX란?

Javascript syntax extension의 약자이다. 그냥 직역하면 JS 확장 문법임. 리액트에서는 JSX를 이용해 화면에 보일 UI를 표현한다.

사실 이전에 App.js 파일을 보면

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="<https://reactjs.org>"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

위와 같이 JS코드 내에 HTML코드가 들어간 것 처럼 보이는 부분이 있는데 이건 HTML이 아니다!!

이게 바로 JSX임.

JSX를 이용하면 UI를 나타낼때 JS로직과 html의 마크업을 한 페이지에 작성할 수 있어서 JS진영에서 자주 사용된다…

자바의 템플릿 엔진같은 녀석들인듯.. 그래도 그 녀석들은 HTML에 붙어서 사용되던 녀석들이긴 한데… JSX는 대체 정체가 뭘까? 이친구를 누가 HTML로 컴파일해주는건가?

리액트로 프로젝트를 진행할때, UI 작업을 할때 너무 편리하기 때문에 거의 대부분 JSX를 사용한다.

JSX가 없다면?

React.createElement() 라는 API를 이용해 요소 객체를 생성한 후 이 객체를 ReactDOM.render() 라는 메서드로 웹 브라우저에 렌더링 해야 한다… 근데 이 createElement() 메서드가 사용하기 까다롭다.

const myelement = React.createElement('h1', {}, 'i do not us JSX');

이딴 식으로 써야함…

JSX는 위처럼 쓰지 않고 createElement를 쉽게 사용하기 위해 사용한다.

JSX를 이용하면 바벨이 이걸 createElement() 로 바꿔준다!! 고맙다 바벨아~