React JSX

const element = <h1>Hello, world!</h1>;

JSX는 HTML도 아니고, 문자열도 아닌 형태로 사용합니다. 아주 희안합니다.

그러니까, JavaScript안에서 태그 모양을 그대로 불러와서 사용하는 문법이라고 생각하면 좋겠습니다.

 

1. 먼저 하나의 엘리먼트가 모든 엘리먼트를 감싸고 있어야합니다.

2. 자바스크립트 코드를 적용할 땐 중괄호 {} 안에서 이용해야한다.

3. JSX 내부에서는 if문을 사용할 수 없기 때문에 3항 연산자로 표시해야합니다. 조건부랜더링 할 땐 () ? a : b

4. 엘리먼트의 클래스 이름은 class 대신 className이라고 사용한다.

 

JSX도 표현식이기 대문에 컴파일이 끝나면 JavaScript객체로 인식됩니다.

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

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

태그의 속성은 똑같이 사용할 수 있으며 따옴표를 이용해서 문자열 리터럴을 정의할 수 있습니다.

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

또한 중괄호를 이용해서 attribute에 JavaScirpt표현식을 삽입할 수도 있습니다.

단, 여기서 따옴표는 문자열 리터럴에만 사용하거나, 중괄호 표현식에서만 사용해야하지, 동시에 사용해서는 안됩니다.

const element = <img src = {user.avartarUr}></img>;
// JavaScript에서 태그들을 그대로 불러오고, 또 JavaScript 표현식을 중괄호 안에서 사용중.

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

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

JSX는 Code injection(코드 주입 공격)에 안전합니다.

기본적으로 ReactDOM은 JSX 에 삽입된 모든 값을 렌더링 하기 전에 이스케이프하기 때문에 

애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다.

모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS (Cross-site-scripting) 공격을 방지할 수 있습니다.

 

JSX는 객체를 표현합니다.

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

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을 구성하고, 최신으로 유지하는데 이러한 객체를 사용합니다.