React 리액트에서 UI를 정의할 때 사용하는 JSX: JavaScript XML

JSX: JavaScript XML

JSX(JavaScript XML)는 React에서만 사용하는 JavaScript 확장 문법입니다. JSX를 사용하면 JavaScript 코드 안에 HTML과 유사한 코드를 작성할 수 있습니다. 즉, JSX는 React 컴포넌트를 만들 때 UI를 정의하는데 사용합니다.

 

JavaScript로 UI 표현

`React.createElement`를 사용하여 React 요소를 생성할 수 있습니다.

아래 코드는 type: h1이고, props: {className: 'hello'} 을 갖고, 자식: 'Hello, React!' 문자열을 갖는 React 요소를 생성합니다.

// createElement(type, props, ...children)
const element = React.createElement(
  'h1', 
  { className: 'hello' },
  'Hello, React!'
);

 

 

리액트는 가상 DOM 방식을 통해서 화면에 렌더링해주기 때문에, 보통 HTML을 파싱하여 화면에 보여주지 않습니다.

때문에 React.createElement를 사용하여 엘리먼트를 생성하고, 이 엘리먼트를 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 화면을 그려줍니다.

 

하지만 UI를 만들때 마다 React.createElement를 사용하게 되면, 코드는 복잡해지고 가독성도 떨어지게 됩니다. 때문에 React를 사용하는 대부분의 사람들은 JS 안에서 UI를 작업할 때 JSX를 사용합니다.

 

 

JSX로 UI 표현

JSX를 사용하면 HTML과 유사한 문법으로 React 요소를 작성할 수 있어, 코드가 더 읽기 쉽고 직관적입니다.

const element = <h1 className="hello">Hello, React!</h1>;

 

JSX를 사용하면 컴파일 시 바벨(Babel)이 React.createElement로 변환하여 사용합니다.

 

 

JSX 예제 코드

JSX를 사용하지 않은 React 컴포넌트

import React from 'react';
import ReactDOM from 'react-dom';
 
function Hello(props) {
  return React.createElement(
    'h1',
    { className: 'hello' },
    `Hello, ${props.name}`
  );
}
 
ReactDOM.render(
  React.createElement(Hello, { name: 'React' }, null),
  document.getElementById('root')
);

 

JSX를 사용한 React 컴포넌트

import React from 'react';
import ReactDOM from 'react-dom';
 
function Hello(props) {
  return <h1 className="hello">Hello, {props.name}</h1>;
}
 
ReactDOM.render(
  <Hello name="React" />,
  document.getElementById('root')
);

 

 

JSX 주의사항

1. JSX 표현식은 단일 루트 요소로 감싸야 합니다. 여러 요소를 반환하려면 `<div>`나 `<Fragment>`로 감싸야 합니다.

// 오류 발생
return (
  <h1>Hello</h1>
  <h2>World</h2>
);
 
// 올바른 사용
return (
  <div>
    <h1>Hello</h1>
    <h2>World</h2>
  </div>
);
 
// 또는 Fragment 사용
return (
  <>
    <h1>Hello</h1>
    <h2>World</h2>
  </>
);

 

2. JSX안에서는 JavaScript 표현식을 사용할 수 있지만, 문(statement)은 사용할 수 없습니다.

// 올바른 사용
return <h1>{1 + 2}</h1>;
 
// 오류 발생
return <h1>{if (true) { return 1; }}</h1>;

 

3. JSX에서 CSS 클래스를 지정할 때는 `class`가 아닌 `className`을 사용해야 합니다.

return <div className="my-class">Content</div>;