JSX는 React의 요구 사항이 아닙니다. JSX 없이 React를 사용하는 것은 빌드 환경에서 컴파일을 설정하고 싶지 않을 때 특히 편리합니다.

이 튜토리얼에서는 JSX 없이 React를 사용하는 방법을 보여줍니다. 또한 JSX로 작성된 코드가 일반 JavaScript로 변환되는 방법도 보여줍니다.

JSX 란 무엇입니까?

다음 변수 선언을 고려하십시오.

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

이 이상한 태그 구문은 문자열도 HTML도 아닙니다.

JSX라고 하며 JavaScript에 대한 구문 확장입니다. UI가 어떻게 생겼는지 설명하기 위해 React와 함께 일반적으로 사용됩니다. JSX는 템플릿 언어를 생각나게 하지만 JavaScript의 모든 기능을 제공합니다.

자바스크립트로 변환

각 JSX 요소는 실제로 React.createElement() 메서드를 호출하기 위한 구문 설탕입니다. 즉, JSX로 작성된 모든 코드는 일반 JavaScript로도 작성할 수 있습니다.

예를 들어 이 코드는 JSX로 작성되었습니다.

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.toWhat}!</h1>;
  }
}

ReactDOM.render(
  <Hello toWhat="world" />,
  document.getElementById("root")
);

JSX를 사용하지 않는 다음 코드로 컴파일할 수 있습니다.

class Hello extends React.Component {
  render() {
    return React.createElement("h1", null, `Hello, ${this.props.toWhat}!`);
  }
}

ReactDOM.render(
  React.createElement(Hello, { toWhat: "world" }, null),
  document.getElementById("root")
);

이는 JSX 코드가 컴파일 중에 패키지Babel를 사용하여 JavaScript로 변환되기 때문에 발생합니다. 이것이 어떻게 작동하는지 더 많은 예를 보고 싶다면 Babel's online compiler 을 시도해 보십시오.

속기

너무 많이 입력하는 것이 지겹다면React.createElement 한 가지 일반적인 패턴은 속기를 지정하는 것입니다.

const e = React.createElement;

ReactDOM.render(
  e("h1", null, "Hello, world!"),
  document.getElementById("root")
);

React.createElement 에 이 약식을 사용하면 JSX 없이 React를 사용하는 것이 거의 편리할 수 있습니다.