JSX 소개

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다.

 

JSX는 JavaScript XML의 약자로 JavaScript를 확장한 문법입니다.

겉으로 보기에는 템플릿 언어같아 보이지만, JavaScript의 모든 기능이 포함되어 있습니다.

JSX를 리액트와 같이 쓰면 UI 관련 작업을 할 때 더 직관적인 코드를 작성할 수 있게 됩니다.

예를 들어,

var element = React.createElement("h1", null, "Hello, ", name);

이렇게 HTML <h1>태그를 만들어야 하는데 (물론 이것은 진짜 DOM element는 아니고 가상 DOM인 React element입니다)

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

훨씬 직관적으로 코드를 작성할 수 있습니다.

 

JSX에는 표현식을 넣을 수 있습니다.

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

위 코드에서 <h1></h1> JSX가 있는데 이 안에 중괄호를 사용해서 JavaScript 표현식을 넣을 수 있습니다.

그러므로

• 조건문 & 반복문
• 변수 할당
• 함수로부터 반환

가 가능합니다.

 

밑의 ReactDOM.render() 부분은 잠시 후에 설명 드리겠습니다.

 

JSX 의 속성(attribute)을 정의할 수 있습니다.

• 따옴표(문자열 리터럴 정의 시)

const element = <div tabIndex="0"></div>;

• 중괄호(JavaScript 표현식 삽입 시)

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

둘 중 하나만을 사용합니다.

 

※JSX는 속성을 정의할 때 HTML과는 달리 여러 단어를 연달아 사용할 때 첫 글자를 대문자로 적되 맨 앞 글자만 소문자로 쓴 camelCase 프로퍼티 명명 규칙을 사용합니다.

ex) class -> className (이것은 자바스크립트의 class키워드가 중복되지 않기 위해서이지만 camelCase이므로)

ex) onclick -> onClick

 

JSX로 자식(child)을 정할 수 있습니다

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

<div></div> 내부에 자식 JSX <h1></h1>과 <h2></h2>를 포함할 수 있고 이때 태그는 반드시 닫아주어야 합니다.

 

JSX는 주입 공격을 방지합니다

다음 코드와 같이 사용하는 것은 가능합니다.

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

JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로 XSS 공격으로부터 의도된 코드를 실행하지 않고 렌더링 전에 문자열로 변환됩니다.

 

JSX는 객체를 표현합니다

Babel은 자바스크립트 문법을 확장해 주는 도구입니다. 아직 지원되지 않는 최신 문법이나 정식을 채택되지 않은 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로써 구형 브라우저 같은 환경에서도 제대로 실행할 수 있게 해주는 트랜스파일러입니다.

 

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

JSX 코드

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

Babel로 트랜스파일링 한 코드

가상 DOM(Virtual DOM)

• 실제 DOM에 접근하는 대신, 자바스크립트 객체로 구성해 추상화하여 사용하는 방식입니다.
• 리액트가 모든 처리를 대신 해주기 때문에 DOM API 조작 작업을 직접 신경 쓸 필요가 없습니다.
• 대신 가상 DOM을 다루거나 리액트가 UI를 생성하고 브라우저와 상호작용하기 위해 사용하는 몇 가지 명령만 다루면 됩니다.

가상 DOM	실제 브라우저 DOM
리액트 엘리먼트	DOM 엘리먼트
React.createElement()로 인해 리액트 엘리먼트가 생성됨	리액트가 리액트 엘리먼트를 DOM 엘리먼트로 바꿈

리액트 엘리먼트의 구조를 단순화 하면 다음과 같습니다.

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

 

참고 및 출처

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

JSX 소개 – React

withseungryu.tistory.com/57

[React] 순수 리액트 (가상 DOM, 리액트 엘리먼트, ReactDOM)

stupidsecurity.tistory.com/17

XSS란?