JSX (JavaScript XML)

JSX란?

React에서 사용하는 JavaScript의 확장 문법으로, HTML과 비슷한 문법을 JavaScript 안에서 사용할 수 있게 해준다.

• 언어는 JavaScript

• 형태는 HTML처럼 작성

• 결국 React.createElement()로 변환된다

  // jsx 코드
  const element = <h1>Hello, JSX!</h1>;

  // React가 해석할 수 있도록 다음과 같이 변환된다.
  const element = React.createElement("h1", null, "Hello, JSX!");

  📦 React.createElement()의 구조

  React.createElement(
    type, // 어떤 태그 또는 컴포넌트 ('div', 'h1', MyComponent 등)
    props, // 속성들 (ex: { className: "title" })
    children // 자식 요소들 (문자열, 다른 createElement 등)
  );

  • React는 브라우저가 이해할 수 없는 JSX를 이런 형태로 변환해서 처리한다.

  • 브라우저는 JSX를 직접 이해 못함 → React.createElement() → Virtual DOM → 실제 DOM 흐름으로 작동

    
    

  예시

  // JSX
  const element = (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );

  const element = React.createElement(
    "div",
    null,
    React.createElement("h1", null, "Hello"),
    React.createElement("p", null, "World")
  );

JSX 문법 규칙

• 1. return 문 안에 HTML처럼 작성한다.

  return <h1>Hello</h1>;

• 2. 두 줄 이상 작성할 경우 소괄호로 묶는다.

  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );

• 3. 하나의 최상위 요소로 묶어줘야 한다.

  // good
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
  
  // bad
  return (
  <h1>Hello</h1>
  <p>World</p>
  );

• 4. 중괄호를 사용해서 JavaScript 코드를 작성한다.

  const name = "짱구";
  return <h1>안녕, {name}!</h1>;