JSX는 React Element를 생성한다. javascript의 확장문법이다. (즉, js 문법을 사용할 수 있음.)

렌더링하는 UI와 로직을 함께 넣어 컴포넌트라고 부르는 느슨하게 연결된 유닛으로 구분한다.

JSX는 마크업과 로직을 같이 사용할 수 있는 언어.

특징

• 중괄호 안에 javascript expression을 넣을 수 있다.

const name = '철현 박';
const element = <h1>Hello, {name}</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
const formatName = (user) => user.firstName + ' ' + user.lastName;
const user = {
  firstName: "철현",
  lastName: "박"
}
const element = <h1>Hello, {formatName(user)}</h1>;
root.render(element);

• JSX도 표현식이다.(값이다.)

const root = ReactDOM.createRoot(document.getElementById('root'));
const formatName = (user) => <h1>{user.firstName} {user.lastName}</h1>  // 값으로써 사용.
const user = {
  firstName: "철현",
  lastName: "박"
}
root.render(formatName(user));

• attribute는 따옴표를 이용해 문자열 리터럴을 정의하던가 중괄호를 사용하여 정의한다.

const achorElement = <a href="<https://www.reactjs.org>"> link </a>;
const imgElement = <img src={user.avatarUrl}></img>;

💡HTML attribute가 camelCase로 작성된다. 예) class ⇒ className

• 태그 내부가 비어있다면 닫아야한다. (/>)

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

• JSX는 렌더링 되기 전에 이스케이프 되어 문자열로 변환된다. 문자열로 변환되었기 때문에 스크립트 태그의 기능이 제거되어 XSS공격을 방지할 수 있다.

어떻게 막는지 해당 글 참고 ⇒ https://onlydev.tistory.com/78

• JSX는 Babel에서 React.createElement()로 호출된 객체로 컴파일 되며, 해당 메소드를 통해 다음과 같은 객체를 생성합니다.(단순한 버전)

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

// --- babel로 컴파일 --- //
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// --- 생성된 객체 --- //
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

위와 같은 객체를 React element라고 하고 React는 이 객체를 읽어 DOM을 구성한다.