JSX

오늘은 JSX 를 조금 자세히 알아보았다.

JSX 는 JavaScript 를 확장한 문법이고, JavaScript 의 모든 기능이 포함되어 있다.
JSX 는 “엘리먼트(element)” 를 생성한다.

그래서 JSX란?

React 에서는 렌더링 로직이 UI 로직과 연결 된다는 사실을 받아들인다.
React는 별도의 파일에 마크업(html)과 로직(js)을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리 한다.

JSX에 표현식 포함하기

아래 예시에는 name 이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용하였다.

const name = ‘Jin Sung’;
const element = <h1>Hello, {name}<h1>;

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

중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있고,
또한 JavaScript의 함수 호출의 결과를 엘리먼트에 포함 할 수 있다.

JSX 도 표현식으로서 JavaScript 함수 호출이 되고 객체로 인식 된다.
즉 if 구문 및 for 반복문 안에 사용하고, 변수에 할당하고, 인자로서 받고, 함수로부터 반환 할 수 있다.

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

JSX는 어트리뷰트(a)에 따옴표를 이용해 문자열 리터럴을 정의할 수 있고, 중괄호를 사용하면 JS 표현식 또한 삽입 가능하다.

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

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

사용자 입력을 삽입하는 것은 안전하다.
모든 항목은 렌더링 되기 전에 문자열로 반환되고, 이런 특성으로 인해 XSS(사이트 간 스크립) 공격을 방지할 수 있다.

JSX는 객체를 표현한다.

Babel은 JSX를 React.createElement() 호출로 컴파일합니다.
Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다.

다음 두 예시는 동일하다.

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