TIL 66일차_React : JSX

JSX는 html처럼 보이지만, 자바스크립트의 확장문법이다.

JSX 규칙

1. 반드시 하나의 엘리먼트로 감싸야 한다.
2. 자바스크립트 코드를 적용할 땐 {}안에 작성한다.
3. JSX 내부에서는 if문을 사용할 수 없다.

따라서 IIFE 또는 삼항연산자를 사용한다.
(JSX가 if문, for문 안으로 들어가는건 상관없다.)

4. 엘리먼트의 클래스 이름을 적용할 땐, class=가 아닌 className= 을 사용한다.
5. JSX 작성시 필수는 아니지만, 이 작업을 수행할 때 자동 세미콜론 삽입을 피하고자 괄호로 묶는 것을 권장한다.

JSX ?

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로,
애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
모든 항목은 렌더링 되기 전에 문자열로 변환된다.
따라서 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있습니다.

JSX는 객체를 표현한다.

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

아래의 두 코드는 동일하다.

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

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

React.createElement()는 다음과 같은 객체를 생성한다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이러한 객체를 “React 엘리먼트” 라고 하며,
화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 된다.
React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용한다.