[React 공식문서 공부] JSX란?

JSX란?

JSX라고 불리는 이 구문은 string도 아니고 HTML도 아닙니다.

JSX는 HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트의 extension 입니다.

JSX는 근본적으로 React.createElement 함수를 편하게 사용하기 위해서 나온 자바스크립트 확장문법이다.

HTML 스러운 문법과 함께 JS를 표현할 수 있어 편리하고 가독성이 높고 작성하기 쉽습니다.

JSX는 객체로 변환이 됩니다.

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

// 1, 2는 동일한 결과다

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

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

해당 element는 React.createElement() 호출을 통하여 객체로 변환됩니다.

// element 가 변환된 객체
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

react는 변환된 element 객체를 통해서 DOM을 구성하고 최신상태 유지하는 데 사용합니다.

 

 

공식문서 통해서 새로 알게된 부분:

1. JSX에서 html 태그쓸때 어트리뷰트 이름이 왜 camelCase일까?

JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.

예를 들어, JSX에서 class는 className , tabindex는 tabIndex가 됩니다.

 

2.JSX는 주입 공격을 방지한다.

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있습니다.

XSS: 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트 를 삽입할 수 있는 취약점이다.