React - JSX

특징

JavaScript XML(extensible markup language)의 줄임말이고, 말그대로 자바스크립트에 XML을 추가한 확장형 문법이다. 기존의 HTML / JavaScript의 파일을 분리하는 경우가 많았는데 JSX를 통해 하나의 문서에 작성할 수 있고 익숙한 문법으로 사용할 수 있다. 또한 컴파일 시에 최적화 되어 있다.

문법

(1) return 값엔 HTML element를 사용한다.

render(){
  return (
    <div>
      <img src = "" />
      <div> Hello, World! </div>
    </div>
  );
}  

(2) element의 tag가 '<'로 시작하여 '/>'로 끝나야 한다. 이 스타일을 맞춰주지 않으면 React 렌더링 엔진에서 오류를 발생시킨다.

<img src = "" />

(3) 파일의 확장자는 '.js' '.jsx'를 사용한다.

참고

1) https://medium.com/@jang.wangsu/rn-jsx-%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-f967f98ea9df
2) https://ko.reactjs.org/docs/jsx-in-depth.html