🧸 JSX의 정의

• 리액트에 종속적이지 않은 독자적인 문법
• XML과 유사한 내장형 구문
• ECMAScript라고 불리는 자바스크립트 표준의 일부는 아님
• 즉, 자바스크립트에 내부에서 표현하기 까다로웠던 XML 스타일의 트리 구문을 작성하는 데 많은 도움을 주는 새로운 문법이라고 볼 수 있음

🤔 내장형 구문(embedded syntax)?

JavaScript 코드 내에 직접 '내장'되어 사용될 수 있다는 것을 의미JSX를 사용하면 HTML과 유사한 태그를 사용하여 UI 구조를 직접적으로 JavaScript 코드 내에 작성할 수 있다는 것을 의미

// 전통적인 JavaScript에서 DOM 요소를 생성하려면 다음과 같은 코드를 작성해야 함.
const title = document.createElement("h1");
title.textContent = "Hello, world!";
document.body.appendChild(title);

// JSX를 사용하면 이와 같은 UI 구조를 훨씬 더 직관적으로 표현할 수 있음.
const title = <h1>Hello, world!</h1>;

🧸 JSX의 특징

• 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환됨
• HTML이나 XML을 자바스크립트 내부에 표현하는 것이 유일한 목적은 아님
  • HTML, XML 외에도 다른 구문으로도 확장될 수 있게끔 고려돼 있으며 최대한 구문을 간결하고 친숙하게 작성할 수 있도록 설계돼 있음
  • XML과 비슷하게 보이는 것은 단순히 자바스크립트 개발자로 하여금 친숙함을 느낄 수 있도록 하는 것
• JSX의 설계 목적은 다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환하는 데 초점을 두고 있음

🧸 JSX 구성

• 기본적으로 JSXElement, JSXAttributes, JSXChildren, JSXStrings라는 4가지 컴포넌트를 기반으로 구성되어 있음

1. JSXElement

• JSX를 구성하는 가장 기본 요소
• HTML의 요소(element)와 비슷한 역할을 함
• 다음과 같은 형태 중 하나여야 함
  1. JSXOpeningElement
     • <JSXElement JSXAttributes(optional)>
  2. JSXClosingElement
     • JSXOpeningElement가 종료됐음을 알리는 요소
     • 반드시 JSXOpeningElement와 쌍으로 사용돼야 함
     • </JSXElement>
  3. JSXSelfClosingElement
     • 요소가 시작되고, 스스로 종료되는 형태를 의미 (내부적으로 자식을 포함할 수 없는 형태를 의미)
     • <script />와 동일한 모습을 띠고 있음
     • <JSXElement JSXAttributes(optional) />
  4. JSXFragment
     • 아무런 요소가 없는 형태
     • <>JSXChildren(optional)</>

👀 리액트에서 컴포넌트를 만들어 사용할 때, 대문자로 시작해야하는 이유