[모던 리액트] 리액트 핵심 요소 : JSX

JSX

: Javascript를 확장시켜 만든 새로운 문법으로, 트랜스파일러(ex. babel)를 필수로 거쳐야 자바스크립트 런타임이 이해할 수 있는 JS 코드로 변환된다. xml 스타일의 트리 구문으로 

 

JSX 구성 예시

function HelloWorld () {
  return (<div className="clz">hello world</div>);
}

 

babel로 컴파일 할 경우 JSX는 React.createElement로 요소를 만든다. 

// 리팩토링 전
function HelloWorld ({ isHead, children }) {
  return isHead
      ? (<h1 className="clz">{children}</h1>)
      :  (<span className="clz">{children}</span>)
}

// 리팩토링 후
function HelloWorld ({ isHead, children }) {
  return React.createElement(isHead ? 'h1' : 'span' , { className : 'clz' }, children);
}