모던 리액트 Deep Dive - JSX란

* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다.

 

JSX란?

• JSX는 XML과 유사한 내장형 구문, 리액트에 종속적이지 않은 독자적인 문법
• JSX는 자바스크립트 표준 코드가 아닌 페이스북이 임의로 만든 새로운 문법, 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환됨.

JSX의 정의

• JSX는 기본적으로 JSXElement. JSXAttributes, JSXChildren, JSXStrings라는 4가지 컴포넌트를 기반으로 구성됨.

JSXElement

• JSX를 구성하는 가장 기본 요소
• HTML요소와 비슷한 역할을 함.

JSXElement의 형태

• JSXOpeningElement / JSXClosingElement
• JSXSelfClosingElement
• JSXFragment

JSXElementName

• JSXElement의 요소 이름으로 쓸 수 있는 것을 의미

JSXIdentifier

• JSX 내부에서 사용할 수 있는 식별자를 의미 = 자바스크립트 식별자 규칙과 동일
• 자바스크립트와 마찬가지로 숫자로 시작, $, _외의 다른 특수문자로는 시작할 수 없음

JSXNamespacedName

• :를 통해 서로 다른 식별자를 이어주는 것도 하나의 식별자로 취급 
• 한개는 가능하고 두개 이상은 올바른 식별자로 취급되지 않음

function example() {
	return (
    	<>
       		<foo:bar></foo:bar> // 1개는 가능
        	<foo:bar:baz></foo:bar:baz> // 2개 이상 불가능 
        </>
    )
}

JSXAttributes

• JSXElement에 부여할 수 있는 속성
• 단순 속성을 의미하기 때문에 모든 경우에서 필수값이 아니고 존재하지 않아도 에러가 나지 않음.

JSXChildren

• JSXElement의 자식 값을 나타냄
• JSX는 속성을 가진 트리 구조를 나타내기 위해 만들어졌기 때문에 JSX로 부모, 자식 관계를 나타낼 수 있으며 그 자식을 JSXChildren이라 함.

JSXChild : JSXChildren을 이루는 기본 단위

• JSXText
• JSXElement
• JSXFragment

 

JSXStrings

• HTML에서 사용 가능한 문자열은 모두 JSXStrings에서도 사용 가능.
• 단 이스케이프 문자 \로 시작하는 경우 자바스크립트에서는 특수문자를 처리할 때 사용되므로 몇가지 제약사항이 있으나, HTML은 아무런 제약없이 사용할 수 없음.

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

• @babel/plugin-transform-react-jsx : JSX 구문을 자바스크립트가 이해할 수 있는 형태로 변환
• JSXElement를 첫번째 인수로 선언해 요소를 정의
• 옵셔널인 JSXChildren, JSXAttributes, JSXStrings는 이후 인수로 넘겨주어 처리
• JSX 반환값은 결국 React.createElement로 귀결된다