JSX 소개 (공식문서)

JSX란?

React에서는 본질적으로 랜더링 로직이 UI 로직과 연결된다

React는 별도의 파일에 마크업(HTMl)과 로직(JS)을 넣어 기술을 인위적으로 분리하는 대신, 둘다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다

JSX에 표현식 포함하기

아래 예시는 name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용하였다

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다
예를 들어 2+2, user.firstName 또는 formatName(user)등 은 모두 유효한 JavaScript 표현식이다.

JSX도 표현식이다

컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript객체로 인식된다
즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다

JSX 속성 정의

어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다

const element = <a href="https://www.reactjs.org"> link </a>;

중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있다

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

JSX는 주입 공격을 방지한다

JSX에 사용자 입력을 삽입하는 것은 안전하다

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

기본적으로 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 앨리먼트'라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 된다