참고링크
https://ko.reactjs.org/docs/introducing-jsx.html
https://thebook.io/080203/ch02/02/
https://cocoon1787.tistory.com/844

🤠 JSX란?

// JSX의 기본적인 문법
const title = <h1>Hello, world!</h1>;

JSX는 Javascript와 XML를 합쳐서 만들어진 자바스크립트 확장 문법이다.
Typescript와도 호환이 가능하여 .tsx로도 사용이 가능하다.

🤯 근데... 리액트에서 .jsx를 사용하는 이유는요?

확장자로써 차이는 없지만, 리액트를 개발하는 대부분의 사람은 Javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움이 된다고 생각한다. 또한 React가 더욱 도움이 되는 에러, 경고 메세지를 표시할 수 있도록 한다.

실제로.js파일에 html 태그 작성 시 JSX의 도움을 받을 수 있으며 .js파일에는 로직, .jsx파일에는 화면 UI 구현을 함으로써 컴포넌트 개발 파일과 로직 개발 파일을 시각적으로 분리할 수 있다.

😲 JSX의 장점

💡 설명 전 간단한 용어 정리

바벨: JSX를 일반 자바스크립트로 컴파일하는 기능을 가진 자바스크립트 컴파일러.
(바벨을 통해 개발자들이 임의로 만든 문법이나 차기 자바스크립트 문법들을 사용할 수 있다.)

번들링: 번들(bundle)은 묶음이라는 뜻으로, 파일을 묶어서 연결하는 것을 말한다.
(파일을 묶음으로써 브라우저에서 로딩되는 속도를 높일 수 있다. 가장 많이 사용하는 번들러는 webpack이다.)

1. 보기 쉽고 익숙하다.

JSX는 브라우저에서 실행되기 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 바뀌게 된다.

// JSX -------------------------------------
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

// JS (JSX에서 바벨을 사용한 뒤 코드) ------------
class Hello extends React.Component {
  render() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
}

ReactDOM.render(
  React.createElement(Hello, {name: "World"}),
  document.getElementById('container')
);

만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 매번 React.createElement 함수를 작성한다면 매우 불편할 것이다. JSX를 사용하면 편하게 UI 렌더링하는 코드를 작성할 수 있다.

2. 높은 활용도를 가지고 있다.

JSX에서는 우리가 알고있는 div나 span같은 HTML 태그를 사용할 수 있으며 직접 만든 컴포넌트를 JSX에 추가할 수 있다.

// create react app 후 src/index.js 파일

ReactDOM.render(<App />, document.getElementById(‘root‘));

💡 ReactDOM.render

첫 번째 파라미터: 페이지에 렌더링할 내용을 직접 만든 컴포넌트를 이용해 JSX 형태로 작성
두 번째 파라미터: 첫 번째 파라미터에서 설정한 JSX를 렌더링 할 document 내부 요소