JSX 소개

JSX (JavaScript XML)

JavaScript를 확장한 문법이다.

JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어있다.

 

JSX는 React "element"를 생성한다.

JSX란?

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

 

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

JSX도 표현식이다.

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

JSX 속성 정의

1. 어트리뷰트에 따옴표를 이용하여 문자열 리터럴을 정의할 수 있다.
2. 중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있다.

JSX 명명

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

 

JSX로 자식 정의

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

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

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

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

기본적으로 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!'
  }
};

따라서 JSX는 객체를 표현하며 이러한 객체를 "React 엘리먼트"라고 한다.

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

 

React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용한다.

 

출처

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

JSX 소개 – React