JSX란?

JSX에 대해 알아보겠습니다. 

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

위의 문법은 JSX로 JavaScript를 확장한 문법입니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX는 React Element를 생성합니다. 

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결됩니다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 Component라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.

React는 JSX 사용이 필수가 아니지만, JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 되며, React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 합니다.

1. JSX에 표현식 포함하기

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

{} 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다. 따라서 아래와 같이 사용하는 것도 가능합니다.

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

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

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

컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다. 즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다. 

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

JSX는 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있고, 중괄호를 사용해 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있습니다. 어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하지 않아야 한니다. 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안됩니다.

const element = <a href="https://www.reactjs.org"> link </a>;
const element = <img src={user.avatarUrl}></img>;

JSX 태그가 비어있다면 XML처럼 /> 를 이용해 바로 닫아주어야 하며, 자식을 포함할 수 있습니다.

const element = <img src={user.avatarUrl} />;
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS(cross-site-scripting) 공격을 방지할 수 있습니다.

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

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 Element라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 됩니다. React는 이 객체를 읽어서, Dom을 구성하고 최신 상태로 유지하는 데 사용합니다.