[모던 리액트 딥다이브] 2.1장 JSX

JSX란

• XML과 유사한 내장형 구무능로 리액트에 종속적이지 않은 독자적인 문법
• 자바스크립트 표준 문법이 아닌 페이스북이 임의로 만든 새로운 문법이기 때문에 반드시 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환됨
• JSX의 설계 목적은 다양한 트랜스파일러에서 다양한 속성을 가친 트리 구조를 토큰화해 ECMAScript가 이해할 수 있는 코드로 변경하는 것
• JSX는 자바스크립트 내부에서 표현하기 까다로웠던 XML 스타일의 트리 구문을 작성하는 데 많은 도움을 주는 새로운 문법임

 

 

JSX의 정의

• JSXElement
  • 가장 기본 요소
  • HTML의 요소와 비슷한 역할
  • JSXElement의 형태
    • JSXOpeningElement : 일반적으로 볼 수 있는 요소, JSXOpeningElement로 시작했다면 JSXClosingElement가 동일한 요소로 같은 단계에서 선언돼 있어야 올바른 JSX 문법임 < JSXOpeningElement >
    • JSXClosingElement : JSXOpeningElement가 종료됐음을 알리는 요소로, 반드시 JSXOpeningElement 와 쌍으로 사용돼야 함 </ JSXClosingElement >
    • JSXSelfClosingElement : 요소가 시작되고, 스스로 종료되는 형태를 의미 < JSXSelfClosingElement />
    • JSXFragment : 아무런 요소가 없는 형태 <></>
  • JSXElementName : JSXElement의 요소 이름으로 쓸 수 있는 것
    • JSXIdentifier : JSX 내부에서 사용할 수 있는 식별자를 의미
    • JSXNamespacedName : JSXIdentifier : JSXIdentifier 의 조합, : 을 통해 서로 다른 식별자를 이어주는 것도 하나의 식별자로 취급됨, 대신 두 개 이상은 올바른 식별자로 취급되지 않음
    • JSXMemberExpression : JSXIdentifier . JSXIdentifier 의 조합, . 을 통해 서로 다른 식별자를 이어주는 것도 하나의 식별자로 취급됨, 여러 개 이어서 하는 것도 가능하나 JSXNamespacedName과 이어서 사용하는 것을 불가능함

function valid() {
	return <foo></foo>
}

function valid() {
	return <foo:bar></foo:bar>
}

function valid() {
	return <foo.bar.bax></foo.bar.bax>
}

리액트에서 컴포넌트를 만들어 사용할 때 반드시 대문자로 시작하는 컴포넌트를 만들어야 함!
그 이유는 리액트에서 HTML 태그명과 사용자가 만든 컴포넌트 태그명을 구분 짓기 위해서임

• JSXAttributes
  
  • JSXElement에 부여할 수 있는 속성을 의미
  • 모든 경우에서 필수값이 아니고, 존재하지 않아도 에러가 나지 않음
  • JSXSpreadAttributes : 자바스크립트의 전개 연산자와 동일한 역할
  • JSXAttribute : 속성을 나타내는 키와 값으로 짝을 이루어 표현함. 키는 JSXAttributeName, 값은JSXAttributeValue으로 불림 
    • JSXAttributeName : 속성의 키 값
    • JSXAttributeValue : 속성의 키에 할당할 수 있는 값
      • 큰따옴표로 구성된 문자열
      • 작은따옴표로 구선된 문자열 
      • { AssignmentExpression }
      • JSXElement
      • JSXFragment
• JSXChildren
  • JSXElement의 자식 값
  • JSXChild : JSXChildren을 이루는 기본 단위
    • JSXText : {,<,>,} 을 제외한 문자열
    • JSXElement
    • JSXFragment
    • { JSXChildExpression (optional) } : 자바스크립트의 AssignmentExpression을 의미
• JSXStrings
  • HTML에서 사용 가능한 문자열은 모두 JSXStrings에서도 가능함
  • 이는 개발자가 HTML의 내용을 손쉽게 JSX로 가져올 수 있도록 의도적으로 설게된 것
  • 큰따옴표로 구성된 문자열
  • 작은따옴표로 구성된 문자열
  • JSXText

const component = <A>안녕하세요</A>

const component = <A />

const component = <A {...{required : true]}/>

const component = <A required/>

const component = <A required={true}/>

const component = (
	<A>
    	<B text="리액트"/>
    </A>
)

const component = (
	<A>
    	<B optionalChildren = {<>안녕하세요</>}/>
    </A>
)

const component = (
	<A>
    	안녕하세요
    	<B text="리액트"/>
    </A>
)

 

 

JSX to 자바스크립트 변환 과정

• 리액트에서 @babel/plugin-transform-react-jsx 플러그인으로 JSX 구문을 자바스크립트가 이해할 수 있는 형태로 변환함
• JSXElement를 첫 번째 인수로 선언해 요소를 정의함
• 옵셔널인 JSXChildren, JSXAttributes, JSXStrings는 이후 인수로 넘겨주어 처리함