jsx란?

JavaScript XML의 약자로, React에서 UI를 선언적으로 표현하기 위해 사용하는 확장 문법
HTML과 유사한 문법을 사용하여 JS 코드 안에서 UI 구조를 직관적으로 표현할 수 있도록 해줌

JSX는 브라우저에서 직접 실행할 수 없음
Babel같은 트랜스파일러를 통해 일반적인 JS코드로 변환된 후 실행됨

const element = (
  <h1 className="greeting">
    Hello, JSX!
  </h1>
);

이 코드를 트랜스파일링 과정을 거친다면?

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()는 React의 핵심 API 중 하나, 가장 DOM 요소를 생성하는 역할
이를 통해 React는 요소를 트리 구조로 관리하고, 변경 사항을 효율적으로 감지해 실제 DOM에 반영함

JSX는 React에서만 사용? or 다른 환경에서도 사용 가능?

당연히 다른 라이브러리나 프레임워크에서도 사용 가능

JSX는 단순한 문법 확장이므로, 트랜스파일링을 통해 React외의 라이브러리에서도 활용할 수 있음.

JSX에선 왜 하나의 부모 요소로 감싸서 요소를 반환해야함?

JS문법 상, 하나의 함수에서 배열로 감싸지 않은 두 개의 객체를 반환할 수 없기 때문
JSX도 HTML처럼 보이지만 내부적으로 일반 JS객체로 변환됨
따라서 또 다른 ㅌ ㅐ그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없음

Fragment?
JSX에서 여러 자식을 그룹화할 수 있는 방법
HTML에선 div같은 요소를 사용하여 여러 요소를 감쌀 수 있지만, Fragment 사용 시 불필요한 DOM 요소 추가 없이 여러 요소 반환할 수 있음

import React from 'react';

const MyComponent = () => {
return (
<React.Fragment>

        <h1>제목</h1>
        <p>내용</p>
    </React.Fragment>
);

};

=============================

const MyComponent = () => {
return (
<>

        <h1>제목</h1>
        <p>내용</p>
    </>
);

};

React.Fragment라던가 빈 <>로 사용할 수 있는데,
사용 이유
1. DOM 구조 간소화 - 불필요한 div요소  추가 없이 더 깨끗한DOM 구조 유지
2. 조건부 렌더링 - 여러 요소를 조건부로 반환할 때 유용
<></> 이거로 생각하면 될듯?