FE/리뷰

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

따봉치치 2024. 7. 7. 16:22
728x90



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는 이후 인수로 넘겨주어 처리함

 

728x90