[React 공식문서] 2. JSX 소개

JSX

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

JSX는 Javascript를 확장한 문법입니다.

JSX는 React 엘리먼트를 생성합니다.

 

---

JSX란?

JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있습니다.

컴파일이 끝나면, JSX 표현식은 정규 Javascript 함수 호출이 되고 Javascript 객체로 평가됩니다.

 

이 말인 즉슨, JSX는 if 내부, 반복문에서의 사용 / 변수 할당 / 인자로서의 사용 / 함수로부터 반환이 전부 가능하다는 뜻입니다.

 

JSX 속성 정의

어트리뷰트에

따옴표 → 문자열 리터럴을 정의할 수 있습니다.

중괄호 → Javascript 표현식 삽입할 수 있습니다.

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

 

JSX로 자식 정의

태그가 비어있다면 /> 를 이용해 바로 닫아주고

그게 아니라면 자식을 포함할 수도 있습니다.

 

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

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

 

JSX는 주입 공격을 방지

React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하므로

(모든 항목은 렌더링 되기 전에 문자열로 변환됩니다.)

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

 

이스케이프 처리란?

특정 문자를 원래의 기능에서 벗어나게 변환하는 행위를 이스케이프(Escape)라 합니다.

XSS(Cross Site Scripting)
크로스 사이트 스크립팅 공격은 블로그나 게시판 같은 서비스에서 주로 일어나며 여러 사람들이 보는 글에 스크립트를 주입해서 사용자의 정보(쿠키, 세션)를 탈취하거나 비정상적인 기능을 수행

리액트는 이스케이프 처리를 함으로써 HTML 본연의 태그나 스크립트 기능이 제거가 되기 때문에 XSS(Cross Site Scripting) 공격을 방지할 수 있다.

 

JSX는 객체를 표현

Babel은 JSX를 React.createElement() 호출로 컴파일합니다.

 

우리가 JSX를 아래와 같이 작성했다면

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

 

Babel을 통해 빌드하는 시점에서 아래와 같이 변환됩니다.

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

 

그리고 React.createElement()는 몇 가지 검사를 수행한 뒤 객체를 생성합니다.

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

 

이렇게 생성된 객체를 React 엘리먼트라고 하며,

화면에서 보고싶은 것을 나타내는 표현이라고 생각하면 됩니다.

 

React는 이 객체를 읽어

DOM을 구성하고 최신 상태로 유지하는데 사용합니다.

 

---

❗ 요약 정리 ❗

1️⃣ JSX는 Javascript를 확장한, React 구조를 보다 쉽게 작성할 수 있는 문법

 

2️⃣ JSX는 빌드할 때, Babel에 의해 React.createElement()로 변환이 되며, 객체(React 엘리먼트)를 생성

 

3️⃣ 리액트는 이 객체(React 엘리먼트)를 읽어 DOM을 구성하고 최신 상태로 유지

 

---

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React