JSX와 Babel

JSX는 JavaScript 확장 문법으로, React에서 UI를 구조적으로 작성할 수 있게 해줍니다. Babel은 JSX를 JavaScript로 트랜스파일링(transpiling)하여 브라우저에서 이해할 수 있는 형태로 변환합니다. JSX의 특징과 Babel이 이를 어떻게 처리하는지, 그리고 컴포넌트명을 대문자로 시작해야 하는 이유에 대해 알아보겠습니다.

JSX (JavaScript XML)

JSX는 JavaScript XML의 약자로, JavaScript의 확장 문법입니다. React에서 UI를 구조적으로 작성할 수 있게 해주는 이 문법은 JavaScript 코드 안에 HTML과 유사한 구문을 사용하여 구조적 UI를 정의할 수 있게 해줍니다.

JSX의 주요 특징과 사용 규칙

1. HTML 태그 사용: JSX에서는 실제 HTML 태그를 그대로 사용할 수 있습니다. 예를 들어, <div>, <span>, <h1>, <input> 등의 모든 HTML 태그를 직접 사용할 수 있습니다.

2. JavaScript 표현식 사용: JSX 내부 중괄호 {} 안에 JavaScript 표현식을 사용할 수 있습니다. 이는 변수, 연산, 함수 호출, 그리고 삼항 연산자와 같은 조건부 표현식을 포함합니다.

3. 직접적인 if 문 사용 불가: JSX 내부에서는 if 문을 직접 사용할 수 없습니다. 대신 삼항 연산자나 논리 연산자를 사용합니다.

   // 올바른 코드
   const element = (
     <div>
       {number % 2 === 0 ? "짝수" : "홀수"}
     </div>
   );
   
   // 잘못된 코드
   const element = (
     <div>
       {
         if (number % 2 === 0) {
           "짝수"
         } else {
           "홀수"
         }
       }
     </div>
   );

4. 단일 부모 요소로 감싸기: 여러 요소는 반드시 하나의 부모 요소로 감싸야 합니다.

   // 올바른 코드
   const element = (
     <div>
       <h1>제목</h1>
       <p>내용</p>
     </div>
   );
   
   // 잘못된 코드
   const element = (
     <h1>제목</h1>
     <p>내용</p>
   );

5. 컴포넌트명 대문자로 시작: React에서 컴포넌트명은 반드시 대문자로 시작해야 합니다. 이는 JSX가 HTML 태그와 React 컴포넌트를 구분하는 방식입니다. 그 이유는 다음과 같습니다:

   • JSX 태그는 Babel에 의해 React.createElement()나 _jsx() 함수 호출로 변환됩니다.
   • 소문자로 시작하는 태그는 문자열로 전달되어 HTML 내장 요소로 취급됩니다.
     예: <div> → _jsx('div', { children: 'Hello' });
   • 대문자로 시작하는 태그는 변수로 직접 참조됩니다.
     예: <MyComponent> → _jsx(MyComponent, { children: 'Hello' });
   • 소문자로 시작하는 사용자 정의 컴포넌트는 HTML 내장 요소로 인식되어 오류가 발생하거나 빈 요소로 렌더링됩니다.

   // 올바른 사용
   function MyComponent() {
     return <div>Hello World</div>;
   }
   <MyComponent />
   
   // 잘못된 사용 (오류 발생)
   function myComponent() {
     return <div>Hello World</div>;
   }
   <myComponent />

   위 코드에서 <myComponent />는 React.createElement('myComponent')로 변환되고, HTML 내장 요소로 인식됩니다. 그러나 'myComponent'라는 HTML 태그는 존재하지 않으므로 오류가 발생하거나 예상치 못한 결과를 낳을 수 있습니다.

Babel: JSX 트랜스파일러

Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 변환하며, 최신 JavaScript 코드를 이전 버전의 JavaScript로 변환하는 트랜스파일러입니다.

**### 트랜스파일링 (Transpiling)

트랜스파일링이란 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 과정을 말합니다. Babel은 JSX뿐만 아니라 최신 JavaScript(예: ES6, ES7) 코드도 구형 브라우저에서 실행할 수 있는 코드로 변환해줍니다.

JSX 변환 예시

JSX 코드:

const MyComponent = () => {
  return (
    <div className="container">
      <h1>Hello, world!</h1>
    </div>
  );
};

변환된 JavaScript 코드:

import { jsx as _jsx } from "react/jsx-runtime";
const MyComponent = () => {
  return /*#__PURE__*/_jsx("div", {
    className: "container",
    children: /*#__PURE__*/_jsx("h1", {
      children: "Hello, world!"
    })
  });
};

이 변환 과정을 통해 JSX로 작성된 코드가 모든 브라우저에서 실행될 수 있는 표준 JavaScript로 변환됩니다.