React 공식 홈페이지의 내용을 개인 학습을 위해 옮겨적은 페이지 입니다.

JSX?

javascript를 확장한 문법.
UI가 어떻게 생겨야하는지 설명하기 위해 React와 함께 사용하는 것을 권장(React를 쓸때 JSX를 써라)
javascript의 모든 기능이 포함되어 있다.

중괄호를 이용하여 javascript 표현식을 넣을 수 있다.

name 이라는 변수를 선언 후 중괄호로 감싸서 출력

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

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

중괄호를 이용한 함수 호출

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

JSX도 표현식이다

컴파일이 끝나면, JSX 표현식이 정규 javascript 함수 호출이 되고 javascript 객체로 인식됨.

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

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

JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.

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

중괄호를 사용하여 어트리뷰트에 javascript 표현식을 삽일할 수 있다.

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

따옴표와 중괄호는 둘중 하나만써야 하며, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안됨.

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

class => className, tabindex => tabIndex

자식 정의

자식이 없다면 바로 close 해준다. 이때 XML 처럼 /> 를 사용 가능

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

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

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

JSX는 주입(injection) 공격을 방지합니다.

JSX에 사용자 입력을 삽입하는 것은 안전하다.

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

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

이러한 객체를 React 엘리먼트라고 하며, 화면에 표시하려는 항목에 대한 설명이라고 생각할 수 있다.

React는 이러한 객체를 읽어 DOM을 구성하고 최신으로 유지하는데 이러한 객체를 사용.

출처

JSX 소개