JSX란

함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장

• HTML과 비슷하게 생겼으나 JavaScript이고 HTML과 다른 부분이 엄연히 있음
• Babel에 의해서 Tracnscompile 된다.

리액트 컴포넌트를 trans compile하여 JavaScript로 출력할 경우

React.createElement(
  "div",
  {
    className: "App",
  },
  React.createElement(
    "header",
    {
      className: "App-header",
    },
    React.createElement(
      "img",
      {
        src: logo,
        className: "App-logo",
        alt: "logo",
      },
      React.createElement("h1"),
      {
        className: "App-title",
      },
      "Welcome to React"
    )
  ),
  React.createElement(
    "p",
    {
      className: "App-intro",
    },
    "Hello World"
  )
);

jsx로 코드를 짠 경우

<div className="App">
  <header className="App">
    <img src={logo} className="App-logo" alt="logo" />
    <h1 className="App-title">Welcome to React</h1>
  </header>
  <p className="App-intro">Hello React</p>
</div>

위의 코드처럼 리액트가 js로 변환되어 있는 코드보다 간결하게 표현되어 개발자에게 HTML과 비슷한 개발 경험을 제공해서 개발자의 생산성을 높여준다.

🌀 # JSX의 장점

1. 개발자의 편의성 향상

앞서 적은 것과 같이 HTML과 비슷한 코드 구조로 개발자의 개발 경험을 개선해서 편의성을 높여준다.

2. 협업에 용이/생산성 향상

비개발자의 경우에도 trans compile된 js들로만 리액트 컴포넌트가 개발되어 있다면 알아보기가 어렵지만 JSX는 상대적으로 알아보기가 쉽다.

3. 문법 오류와 코드량 감소

실수나 반복으로 인핸 휴먼에러를 줄일 수 있다.

🌀 JSX의 특징

- HTML 태그 내에 JavaScript 연산

🌀 HTML과의 차이점

1. class -> className

2. 스타일은 object로

HTML에서는 스트링("")으로 CSS 코드를 작성하지만 JSX는 자바스크립트 object({})로 작성을 한다.

<div className="greeting" style={{ padding: 10, color: "red" }}>
  {name}님 반가워요. <br />
  요즘 어떻게 지내나요?
</div>

// style에서 첫번째 중괄호는 자바스크립트 코드를 괄호 내에 적기 위해 쓰는 것이고
// 			두번째 중괄호는 그 안에 자바스크립트 object를 사용한다는 의미이다.

3. 닫는 태그 필수

단일태그 내에 반드시 /를 넣어야 한다.

4. 최상단 element는 반드시 하나

JSX의 원칙상 최상단 Element는 한 개만 작성이 가능하기 때문에 이를