JSX

🔎 JSX(JavaScript XML)란?

✔️ JSX는 JavaScript를 확장한 문법이다.
✔️ JSX는 React element를 생성한다.

💡 React element
브라우저 DOM element와 달리 React element는 일반 객체이며, 쉽게 생성할 수 있다. React DOM은 React element와 일치하도록 DOM을 업데이트한다.

✔️ 브라우저에서 실행하기 전에 Babel을 사용하여 일반 JavaScript 형태의 코드로 변환한다.

💡 Babel
ES6의 문법을 각 브라우저의 호환 가능한 ES5로 변환하는 컴파일러.
구 버전 브라우저 중에서 ES6의 기능을 지원하지 않는 브라우저가 있으므로 transpiling 하기 위해 사용
ex) Babel은 typescript 문법을 javascript 문법으로 변환될 때 사용된다.

✔️ JSX를 이용하여 하나의 파일에서 JavaScript와 HTML을 동시에 작성하여 편리하다.

🔎 JSX 문법

👉 반드시 부모 요소 하나로 전체를 감싸는 형태여야 한다.
: Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다.

function App(){
	return (
      	<div>
      		<h3>Example</h3>
      		<div>jsx</div>
      	</div>
    )
}

👉 { } 을 이용하여 JSX 안에서 JavaScript 표현식을 사용할 수 있다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

➕ 속성에도 JavaScript 표현식을 삽입할 수 있다.

const element = <img src={user.avatarUrl}></img>;

⚠️ JSX는 HTML보다 JavaScript에 가깝기 때문에 React DOM은 HTML 속성 이름 대신 cam elCase 프로퍼티 명명 규칙을 사용한다.
ex) class -> className, tabindex -> tabIndex


👉 JSX는 객체를 표현한다. Babel은 JSX를 React.createElement() 호출로 컴파일한다.
아래의 두 코드는 동일하다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

References:
https://ko.reactjs.org/docs/introducing-jsx.html
https://goddaehee.tistory.com/296
https://bravenamme.github.io/2020/02/12/what-is-babel/
https://ko.reactjs.org/docs/rendering-elements.html