리액트 2 - JSX

오늘 알아 볼 것.

• JSX 소개
• JSX 사용법

JSX?

• JavaScript를 확장한 문법이다.
• React element(요소)를 생성한다.

생김세는 이렇다

const element = <h1>Hello, world!</h1>;

JSX 사용법

• JSX에 표현식을 표함 할 수 있다.
  중괄호 안에 유효한 모든 JavaScript 표현식을 넣을 수 있다.

• JSX도 표현식이다.
  컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수 호출이 되고 객체로 인식된다.

• JSX에 속성을 정의할 수 있다.
  어트리뷰트에 따옴표를 이용하여 문자열 리터널을 정의할 수 있다.
  중괄호를 사용하여 javaScript 표현식을 삽입할 수 있다.

• JSX 태그는 자식을 포함할 수 있다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

태그가 비어있다면 />을 이용해 태그를 닫아주어야 한다.

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

• JSX는 주입공격(XSS)을 방지한다.

XSS?
사용자의 입력폼에 스크립트를 입력해서 렌더링할 때 스크립트가 실행되는 공격방식이며, 입력받은 값을 검사하지 않고 사용할 경우 나타날 수 있다.

React DOM은 JSX에 삽입된 모든 값을 렌더링 전에 이스케이프하므로 코드에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.

이스케이프?
특정 문자를 원래의 기능에서 벗어나게 변환하는 행위
구문으로 분리되는 문자들을 텍스트로 인식시키기 위해 작성하는 방법
EX) " 문자열을 인식하기 위해 \" 로 표현하는 등..

• JSX는 객체를 표현합니다.
  bable은 JSX를 React.createElement() 호출로 컴파일한다.

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

React.createElement()는 기본적으로 다음과 같은 객체를 생성합니다.

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

이러한 객체를 "React 엘리먼트"라고 한다. React는 이 객체를 읽어서 DOM을 구성하고 최신 상태로 유지하는데 사용한다.