JSX 란?

JSX

JSX의 정의

JSXElement

• JSXOpeningElement: 일반적으로 볼 수 있는 요소. JSXOpeningElement로 시작했다면 후술할 JSXClosingElement가 동일한 요소로 같은 단계에서 선언돼 있어야 올바른 JSX 문법으로 간주됨.
<JSXElement JSXAttributes(optional)>

• JSXClosingElement: JSXOpeningElement가 종료되었음을 알리는 요소, 반드시 JSXOpeningElement와 쌍으로 사용되어야 함.
<JSXElement />

• JSXSelfClosingElement: 요소가 시작되고, 스스로 종료되는 형태를 의미. <script />와 동일한 모습을 띠고 있다. 내부적으로 자식을 포함할 . 수없음. <JSXElement JSXAttributes(optional) />

• JSXFragment: 아무 요소가 없는 형태 JSXSelfClosingElement 형태를 띌 수는 없다.
<>JSXChildren(optional)</>

리액트에서 HTML 구문 이외에 사용자 컴포넌트는 반드시 대문자로 써야하는데 이는 HTML 태그명과 사용자 컴포넌트를 구별하기 위해. HTML를 딱 지정해서 필터링 하지 않은 이유는 추후 추가될 HTML 태그의 확장성을 고려한듯.

JSXElementName

• JSXIdentifier: JSX 내부에서 사용할 수 있는 식별자를 의미함. 자바스크립트 식별자 규칙과 동일함. <$></$> <_></_>도 가능하지만 이외에 숫자로 시작하거나 다른 특수문자는 안된다.

• JSXNamespacedName: JSXIdentifier: JSXIdentifier 의 조합 : 을 사용해 서로 다른 식별자를 이어주는 것도 하나의 식별자로 취급됨. 1개만 가능하고 두개 이상은 올바른 식별자로 취급하지 않음.

• JSXMemberExpression: JSXIdentifier.JSXIdentifier의 조합 . 을 통해 서로 다른 식별자를 이어주는 것. JSXNamespacedName과 다르게 .을 여러개 이어서 하는게 가능하지만 JSXNamespacedName과는 함께 사용 불가능

JSXAttributes

• JSXSpreadAttributes: 자바스크립트의 전개 연산자와 동일한 역할.\
• {…AssignmentExpression} : 단순히 객체뿐만 아니라 자바스크립트에서 AssignmentExpression 로 취급되는 모든 표현식이 존재할 수 있다.(조건문, 표현식 함수 등)

• JSXAttribute: 속성을 나타내는 키와 값으로 짝을 이루어 표현 키는 JSXAttributeName, 값은 JSXAttributeValue로 불림.
• JSXAttributeName: JSXIdentifier와 JSXNamespacedName 이름이 가능
• JSXAttributeValue:
• 문자열
• {…AssignmentExpression} : 자바스크립트에서 값을 할당할 떄 쓰는 표현식 변수에 값을 넣을 수 있는 표현식은 JSX 속성의 값으로도 가능함.
• JSXElement: 값으로 다른 JSX 요소가 가능함.

JSXChildern

• JSXChild: JSXChildern을 이루는 기본 단위 JSXChildern은 JSXChild를 0개 이상 가질 수 있다.
• JSXText: {, <, >, } 을 제외한 문자열 이걸 표현하고 싶으면 문자열로 표현하기 ‘{’
• JSXElement: 값으로 다른 JSX 요소가 가능
• JSXFragment: 값으로 빈 JSX 요소가 가능 <></>
• {JSXChildExpression}: AssignmentExpression 을 의미함.

export default function App (){
	return <>{(() => 'foo')()}</>

JSXString

JSX는 어떻게 자바스크립트에서 변환될까?

꿀팁

function TextOrHeading({
	isHeading,
	children,
}: PropsWithChildren<{isHeading: boolean}>{
	return isHeading ? (
		<h1 className='txt'>{children}</h1>
		):(
		<span className='txt'>{children}</span>
	)
}

// 리펙토링
import {createElement} from 'react';

function TextOrHeading({
	isHeading,
	children,
}: PropsWithChildren<{isHeading: boolean}>{
	return createElement(
		isHeading ? 'h1' : 'span',
		{className: 'text' },
		children
	)
}

마무리