JSX(JavaScript XML)란 무엇인가?

JSX(JavaScript XML)는 React와 함께 사용되는 UI(User Interface) 컴포넌트를 만들기 위한 JavaScript 확장 문법 입니다. 

JSX는 XML과 비슷한 문법을 가지며, JavaScript 코드 안에서 HTML과 유사한 구조로 UI 요소를 정의할 수 있게 해줍니다.

JSX 문법

JSX 문법은 일반적인 JavaScript와 유사하지만, 몇 가지 차이점이 있습니다. JSX에서는 HTML 태그와 유사한 구조로 컴포넌트를 정의할 수 있으며, 이를 React에서 사용하는 컴포넌트로 변환하여 사용합니다.

간단한 JSX 예시를 살펴보겠습니다:

const App = () => {
  return (
    <div className="app">
      <h1>Hello, JSX!</h1>
      <p>This is a JSX component.</p>
    </div>
  );
};

 

위 코드에서 return 문 안에 XML과 유사한 태그 구문으로 UI 컴포넌트를 작성하고 있습니다. 

<div>, <h1>, <p>와 같은 태그들은 React 요소(Element)로 변환되어 사용됩니다.

---

React 요소(Element)로 변환

JSX 작성

const myComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a JSX component.</p>
    </div>
  );
};

Babel 변환 

JSX 코드는 브라우저에서 바로 실행할 수 없기 때문에, Babel과 같은 도구를 사용하여 일반 JavaScript 코드로 변환

const myComponent = () => {
  return /*#__PURE__*/React.createElement("div", null,
    /*#__PURE__*/React.createElement("h1", null, "Hello, World!"),
    /*#__PURE__*/React.createElement("p", null, "This is a JSX component.")
  );
};

React.createElement()

브라우저에서 실행 할 수 있는 일반적인  JavaScript  코드가 됩니다.

이제 해당 컴포넌트가 브라우저에 랸더링되면서, JSX 코드가 웹 페이지에 표시 됩니다.

---

JSX의 장점

JSX를 사용하는 것은 많은 장점을 가져옵니다.

1. 가독성
JSX는 HTML과 비슷한 구문으로 UI를 작성하기 때문에, 가독성이 뛰어납니다. 기존의 JavaScript에서 UI를 생성하는 방식보다 훨씬 직관적이고 명확하게 작성할 수 있습니다.

2. 컴포넌트 기반 개발
JSX를 사용하면 컴포넌트 기반 개발이 가능해집니다. 작고 재사용 가능한 컴포넌트들로 애플리케이션을 구성하여 유지보수와 확장성이 향상됩니다.

3. 강력한 기능
JSX는 JavaScript의 모든 기능을 지원하며, 표현식을 사용하여 동적인 UI를 생성하는 것이 가능합니다.

4. 최적화 용이성
JSX 코드는 Babel과 같은 트랜스파일러를 통해 일반 JavaScript로 변환되어 실행됩니다. 

이 과정에서 최적화가 수행되어 성능 향상에 도움을 줄 수 있습니다.