JSX란?
JSX는 XML과 유사한 내장형 구문이며 JSX는 ECMAScript라고 불리는 자바스크립트 표준의 일부는 아니다.
따라서 V8, Deno와 같은 자바스크립트 엔진이나 크롬, 웨일, 파이어폭스 같은 브라우저에 의해서 실행되거나 표현 되지 않는다.
JSX의 설계 목적은 다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환하는 데 초점을 두고 있다. XML과 비슷하게 보이는 것은 단순한 자바스크립트 개발자로 하여금 친숙함을 느낄 수 있도록 하는 것이다.
JSX의 정의
1. JSXElement
JSX를 구성하는 가장 기본 요소로, HTML의 요소(element)와 비슷한 역할을 한다. JSXElement가 되기 위해서는 다음과 같은 형태 중 하나여야 한다.
JSXOpeningElement : 일반적으로 볼 수 있는 요소. JSXClosingElement가 동일한 요소로 같은 단계에서 선언되어야 올바른 JSX 문법으로 간주된다.
JSXClosingElement: JSXOpeningElement가 종료됐음을 알리는 요소로, 반드시 JSXOpeningElement와 쌍으로 사용되어야 한다.
JSXSelfClosingElement : 시작되고 스스로 종료되는 형태. 내부적으로 자식을 포함할 수 없는 형태를 의미
JSXFragment: 아무런 요소가 없는 형태로 JSXSelfClosingElement의 형태를 띨 수는 없다.
표준에는 없지만 구분을 위해 사용자가 만든 컴포넌트는 대문자로 시작해야한다.
2. JSXElementName
JSXElementName은 JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다. 이름으로 가능한 것은 다음과 같다.
JSXIdentifier: JSX 내부에서 사용할 수 있는 식별자를 의미한다. 이는 자바스크립트 식별자 규칙과 동일하다.
JSXNamespaceName: JSXIdentifier:JSXIdentifier의 조합. 즉 :을 통해 서로 다른 식별자를 이어주는 것도 하나의 식별자로 취급. :로 묶을 수 있는 것은 한 개뿐.
JSXMemberExpression: JSXIdentifier.JSXIdentifier의 조합. JSXNamespaceName과 다르게.을 여러 개 이어서 하는 것도 가능하다. 단 JSXNamespaceName과 이어서 사용하는 것은 불가능하다.
JSXFragment: <></> 허용
3. JSXChildren
JSXElement의 자식 값을 나타냄.
JSXChild: JSXChildren을 이루는 기본 단위. JSXChildren은 JSXChild를 0개 이상 가질 수 있음. 없어도 무방.
- JSXText: {, <, >, }을 제외한 문자열. 다른 JSX 문법과 혼동을 줄 수 있어 별도 표기 만일 표기할려면 문자열을 통해 표기
- JSXElement: 값으로 다른 JSX 요소가 들어갈 수 있음.
- JSXFragment: 값으로 빈 JSX 요소인
<></>가 들어갈 수 있음. - JSXChildExpression : JS의 AssignmentExpression을 의미
export default function App() {
return <>{(() => 'foo'})()}</>
}도 올바른 JSX 문법임.
정리
JSX 문법과 실제 react에서 사용하는 것은 조금 다룰 수 있다. 이는 react에서 모든 JSX 문법이 필요하다고 느끼지 않았기 때문일 것이다.
실제로 react에서 사용하지 않는 문법은 다음과 같다.
- JSXNamespacedName
- JSXMemberExpression
