[Javascript] JSX(JavaScript XML)

JSX(JavaScript XML)는 리액트에서 주로 사용되는 특별한 문법으로, JavaScript 코드 안에 HTML과 유사한 구조를 작성할 수 있게 해준다.

JSX는 리액트 컴포넌트를 정의하고 UI를 표현할 때 주로 사용된다.

그렇다고 JSX를 리액트에서만 사용할 수 있는 것은 아니다.

처음에는 React와 함께 사용하기 위해 Facebook에서 만들었지만 JSX는 여러 웹 프레임워크에서 채택되었다.

 

특징

- HTML과 유사한 문법

JSX는 XML이나 HTML처럼 보이지만, 실제로는 JavaScript로 컴파일된다.

이 때문에 HTML처럼 작성하면서도 JavaScript의 모든 기능을 사용할 수 있다.

- JavaScript와의 결합

JSX는 JavaScript 내에서 HTML 요소를 정의하는 방법이다.

JSX 안에서 JavaScript 표현식을 사용할 수 있으며, 이를 중괄호 {}로 감싸서 사용할 수 있다.

- 컴파일 과정

브라우저가 JSX를 직접 이해하지는 못한다.

그래서 JSX는 Babel 같은 트랜스파일러를 통해 일반 JavaScript 코드로 변환된 후에 실행됩니다.

 

JSX 예시

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

 

위 코드는 트랜스파일 과정에서 다음과 같은 일반 JavaScript 코드로 변환된다.

const element = React.createElement('h1', null, 'Hello, world!');

 JSX는 리액트에서 UI 요소를 더 직관적이고 간결하게 작성할 수 있도록 도와준다.

 

JSX에서 표현식 사용하기

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

 

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

예를 들어 2 + 2, user.firstName 또는 formatName(user) 등은 모두 유효한 JavaScript 표현식이다.

 

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

 

JSX도 표현식이다

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

 

즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

JSX 속성 정의

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

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

 

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

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

 

어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하지 말아야 한다.

따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안된다.

 

JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 된다.

 

JSX로 자식 정의

태그가 비어있다면 XML처럼 /> 를 이용해 바로 닫아주어야 한다.

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

 

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

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

 

JSX는 주입 공격을 방지한다

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

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

 

기본적으로 React DOM은 JSX에 삽입된 모든 값을 랜더링하기 전에 이스케이프하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 랜더링 되기 전에 문자열로 변환된다.

이런 특성으로 인해 XSS(cross-site-scripting) 공격을 방지할 수 있다.

 

XSS(cross-site-scripting)
Cross Site Scripting의 약자로 CSS라고 하는 것이 맞지만 이미 CSS가 Cascading Style Sheets의 약어로 사용되고 있어 XSS라 한다.

XSS는 게시판이나 웹 메일 등에 자바 스크립트와 같은 스크립트 코드를 삽입 해 개발자가 고려하지 않은 기능이 작동하게 하는 치명적일 수 있는 공격이다.

또한 대부분의 웹 해킹 공격 기법과는 다르게 클라이언트 즉, 사용자를 대상으로 한 공격이다.

XSS 공격은 크게 Reflected XSS와 Stored XSS 그리고 DOM Based XSS 세 가지로 분류할 수 있다.

 

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을 구성하고 최신 상태로 유지하는 데 사용한다.

 

---

참고

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

JSX 소개 – React

https://4rgos.tistory.com/1

XSS(Cross Site Scripting) 공격이란?