Deep Dive : 리액트 핵심 요소

 

✓ JSX

- 리액트가 등장하면서 페이스북(메타)에서 소개한 새로운 구문, 문법

- 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 자바스크립트 코드로 변환

- XML 스타일의 트리 구문을 작성하는 데 많은 도움을 주는 새로운 문법

 

 

✓ JSXElement

- JSX를 구성하는 가장 기본 요소

- HTML element와 비슷한 역할

- JSXOpeningElement : <JSXElement JSXAttributes(optional)>

- JSXClosingElement  : </JSXElement>

- JSXSelfClosingElement : <JSXElement JSXAttributes(optional) />

- JSXFragment : <>JSXChildren(optional)</>

- cf) 리액트 컴포넌트는 html 태그와 구분짓기 위해 대문자로 선언

 

✓ JSXElementName

- JSXElement의 요소 이름으로 쓸 수 있는 것

- JSXIdentifier: JSX 내부에서 사용할 수 있는 식별자, 숫자로 시작할 수 없고 $, _외의 다른 특수문자로 시작할 수 없음

- JSXNamespacedName: JSXIdentifier:JSXIdentifier의 조합, : 를 통해 서로 다른 식별자를 이어주는 하나의 식별자

- JSXMemberExpression: JSXIdentifier.JSXIdentifier의 조합, . 를 통해 서로 다른 식별자를 이어주는 하나의 식별자

 

✓ JSXAttribute

- JSXElement에 부여할 수 있는 속성

- JSXSpreadAttributes : { ...AssignmentExpression }

- JSXAttribute : key = JSXAttributeName, value = JSXAttributeValue

-> JSXAttributeValue :  ""로 구성된 문자열 , ''로 구성된 문자열, { AssignmentExpression }, JSXElement, { JSXElement } , JSXFragment 

 

 

✓ JSXChildren

- JSXElement의 자식 값

- JSXChild : JSXChildren을 이루는 기본 단위

-> JSXText, JSTElement, JSXFragment가 가능

 

const Component = (
	<A>
    	<B { ...{required: true}} />
        <C required />
        <D required={false} />
        <E text="리액트" />
        <F optionalChildren={<>안녕하세요.</>} />
    </A>
);

function ComponentA() {
	return <A.B></A.B>;
}

function ComponentB() {
	return <A.B.C></A.B.C>;
}

function ComponentC() {
	return <A:B.C></A:B.C>;
}

function ComponentD() {
	return <$></$>;
}

function ComponentE() {
	return <_></_>;
}

 

✓ 리액트 컴파일

- @babel/plugin-transform-react-jsx 플러그인을 이용해 자바스크립트 구문으로 리액트 코드 변환