JSX는 자바스크립트(JavaScript) 문법의 확장판입니다. JSX는 리액트(React)에서의 요소(Element)를 제공합니다. 또한 향후 리액트의 컴포넌트(Component)에 대해서 공부하게 될 것입니다. 이러한 컴포넌트는 항상 렌더링을 수행한다는 특징이 있습니다. render() 함수로 이를 구현하게 됩니다.

  다음의 소스코드를 실행해 봅시다.

※ HTML 코드 ※

<div id="root"></div>

※ CSS 코드 ※

.blue { 

  color: blue;

}

.red {

  color: red;

}

※ JavaScript 코드 ※

function formatInfo(student) {

  return student.name + "[" + student.id + "]";

}

const student = {

  id: '20153157',

  name: 'Dongbin Na',

  color: 'blue'

};

const element = (

  <h3 class={student.color}>

    {formatInfo(student)}

  </h3>

);

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

  기본적으로 element라는 변수에는 HTML 태그가 포함되어 있고 문자열도 포함되어 있습니다. 이런 것들을 JSX라고 이해하시면 됩니다. 우리가 지난 시간에 설정했던 바벨(Babel)이 JSX 로더를 이용하여 실질적으로 JSX가 동작하게 해줍니다.

  위 소스코드를 보면 알 수 있듯이 JSX에서는 중괄호를 이용하여 자바스크립트(JavaScript) 구문을 실행할 수 있습니다. 이러한 중괄호는 속성의 값으로도 들어갈 수 있다는 점에서 사용이 편리합니다.

  또한 React DOM은 렌더링을 하기 전에 JSX에 포함된 값을 이스케이프 처리합니다. 그래서 XSS로부터 안전합니다. 또한 기본적으로 JSX는 카멜 케이스(Camel Case)를 사용한다는 점에서 기존의 자바(Java) 개발자들에게 익숙하다는 특징이 있습니다.

  리액트에서 요소(Element)를 렌더링하는 것은 매우 간단합니다. 일반적인 브라우저의 DOM 객체와는 다르게 리액트의 객체는 가볍고 강력하다는 특징이 있습니다. React DOM은 브라우저의 DOM이 리액트 요소와 매칭될 수 있도록 관리합니다.

  실제로 React DOM이 얼마나 효율적인지는 다음의 소스코드로 확인해 볼 수 있습니다.

※ HTML 코드 ※

<div id="root"></div>

※ JavaScript 코드 ※

function tick() {

  const element = (

    <h3>현재 시각은 [{new Date().toLocaleTimeString()}] 입니다.</h3>

  );

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

}

setInterval(tick, 1000);

  실제로 크롬(Chrome) 브라우저에서 렌더링 되는 것을 확인해 보시면 시각에 해당하는 부분만 다시 렌더링 되는 것을 확인할 수 있습니다.