[React-복습] 2. JSX

in React on React 입문


JSX 에 대한 스케치 포스팅이다.


01. JSX 소개

아래 태그 문법은 문자열도, HTML도 아닌 JSX로 JavaScript를 확장한 문법이다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있다.

UI를 렌더링하기 위해 React와 함께 사용되며 JSX는 React “엘리먼트(element)” 를 생성한다.

JSX 표현식

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


01-1. ES6 없이 사용하는 React

일반적인 React 컴포넌트 사용

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


ES5 방법 React 컴포넌트 사용

create-react-class 모듈을 사용할 수도 있다

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});


01-2. JSX 없이 사용하는 React

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

JSX로 작성된 코드 예제

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);


JSX를 사용하지 않은 코드 예제

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));



[참고]