[React] JSX

What is JSX ?

• HTML code inside of Javascript
• JSX stands for Javascript XML
• JS에 XML을 추가한 확장문법
• JSX는 React 컴포넌트를 만들 때 사용하는 문법
• 어플리케이션을 컴포넌트로 나누어 관리하게 한다
• 브라우저에서 실행하기 전에 Babel을 사용하여 자바스크립트 형태의 코드로 변환된다

function NewExpense() {
  return (
    <div className="new-expense">
      <ExpenseForm />
    </div>
  );
}

JSX 장점

HTML에 비해 가독성이 높고 작성하기 쉽다는 장점이 있다

🤔 기존의 코드 → 복잡하다,,

React.createElement를 이용한다.
그러나 가독성이 별로인 것 같다..

// 💩 bad code
const root = document.querySelector('#root');
const h3 = React.createElement(
    "h3", 
    {
      id: "title",
      onMouseEnter: () => console.log("mouse")
    },
    "Hello world"
    );

특징

• 반드시 부모 태그로 감싼다
• Js 표현식을 작성하려면 { } 으로 감싼다
• if문과 for문은 JSX내부에서 사용할 수 없다 → 삼항연산자 이용하기!
• class 대신 className이용하기
• 주석은 {/* */} 을 이용하기
• Fragment을 이용해서 로 감싼다
• if문 대신 조건부 연산자를 이용한다

Babel이란?

브라우저는 JSX을 모르기때문에 Babel에게 코드를 넘겨주면 브라우저가 읽을 수 있는 코드로 바꿔준다.

const Title = /*#__PURE__*/React.createElement("h3", {
  id: "title",
  onMouseEnter: () => console.log("mouse")
}, "Hello world");

(Babel은 JSX를 React.createElement()호출로 컴파일한다)