JSX는 자바스크립트의 문법을 확장해 자바스크립트 파일에서 마크업을 작성할 수 있게 해주는 언어입니다.
JSX로 작성한 자바스크립트 파일은 HTML 파일과 비슷한 모양을 갖게 돼요.

JSX, 왜 쓰나요?

HTML, JavaScript 각각 작성하면 될 텐데 굳이 왜 JSX를 쓰는 걸까요?

HTML과 JavaScript는 계속해서 더 가까워지고 있어요. 웹의 인터랙티브 요소가 많아지면서 이벤트 핸들러를 구현할 일이 많아졌고 HTML 내용을 JavaScript에서 채우는 일 또한 많아졌습니다.
HTML과 JavaScript를 따로따로 코딩하는 것보다 그룹으로 묶어 코딩하는 게 더 쉬울 거예요.
그래서 JSX로 HTML 코드와 JavaScript 코드를 함께 작성합니다.

Fragment, <></> 또는 <Fragment></Fragment>로 표현하는 빈 태그

만약 함수가 아래와 같은 코드를 리턴한다면,

function FragmentConfirm() {
  return (
    <h1>Did you wrap the JSX elements with a JSX fragment?</h1>
    <button type="button">Yes, I did.</button>
    <button type="button">No, not yet.</button>
  );
}

다음과 같은 에러 메시지를 확인할 수 있습니다.

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?

JSX fragment로 JSX 요소들을 감싸주어야 한다는 내용인데요, 다음과 같이 코드를 수정한다면 에러를 해결할 수 있습니다.

function FragmentConfirm() {
  return (
    <> // <section>, <div> 등으로 감싸주어도 됩니다.
      <h1>Did you wrap the JSX elements with a JSX fragment?</h1>
      <button type="button">Yes, I did.</button>
      <button type="button">No, not yet.</button>
    </>
  );
}

에러는 해결했지만, 왜 <Fragment> 또는 <>로 전체를 감싸주어야 하는 걸까요?

사실 두 번째 코드 조각에서도 언급했듯 꼭 Fragment를 사용해야 하는 건 아니에요.
JSX 태그는 JavaScript의 객체로 변환되는데 JavaScript 함수가 두 개 이상의 객체를 리턴할 수 없기 때문에 감싸는 태그가 필요한 거예요. 그래서 감싸는 태그가 무엇인지는 상관없지만 하나의 JSX 요소만 리턴하기 위해 Fragment를 사용합니다.