[React] JSX 문법이란?

JSX 란 무엇일까?

jsx는 자바스크립트의 XML이다. 자바스크립트 문법의 확장판으로써 React에서 요소를 제공한다.

 

JSX는 다음과 같은 특징을 갖는다.

• 컴파일에 최적화 되어있다.
• 컴파일 과정이 필요하기 때문에 변환하는 과정에서 오류가 있다면 빌드시 오류를 발생한다.
• 확장자는 .jsx 나 .js를 사용할 수 있다.

JSX 코드의 변환 과정

jsx는 HTML 코드처럼 작성하지만 Babel(바벨)을 통해 자바스크립트 문법으로 변환된다. 이는 Babel 공식 홈페이지에서

실험해볼 수 있다.

Babel · The compiler for next generation JavaScript

 

위 홈페이지에서 try it out 탭을 누르면, 좌측 세팅을 es2015, react 버전으로 맞춰줘야 정상적으로 ES5 코드로 

변환 해준다.

const element = <h1 className="gretting">
  Hello, world!    
  </h1>

위의 코드는 바벨을 통해 아래와 같이 변환된다.

"use strict";

const element = /*#__PURE__*/React.createElement("h1", {
  className: "gretting"
}, "Hello, world!");

최족적으로 element에는 다음과 같은 객체가 생성된다.

const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world!",
  },
};

JSX 문법

JSX는 닫는 태그를 꼭 써주어야 한다.

import React from "react";

function App() {
  return <div></div>;
}

export default App;

import React from "react";

function App() {
  return <div />;
}

export default App;

Fragment

React에서는 두 개 이상의 태그를 사용할 때 전체를 감싸는 태그가 필요한데, 이 때 div태그를 쓰지 않기위해서

Fragment를 사용한다.

import React, {Fragment} from 'react';

function App() {
  return (
     <Fragment>
       <ChildA />
       <ChildB />
       <ChildC />
     </Fragment>
  )
}

또는 다음과 같이 Fragment를 생략하고 사용할 수 있다.

import React, { Fragment } from "react";

function App() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

단, 단축표기법을 사용할 경우 정의나 key를 사용할 수 없다.

 

변수 사용

import React, { Component } from "react";

class App extends Component {
  render() {
    const title = "Hello World";
    return (
      <div>
        <h1>{title}</h1>
      </div>
    );
  }
}

export default App;

위 코드에서처럼 {} 에 변수를 적어서 사용한다.

 

참고 자료

JSX