모던 리액트 Deep Dive - JSX

⚡리액트 핵심 요소 깊게 살펴보기 - 2.1 JSX란?

• javaScript XML의 줄임말로, 리액트(React)에서 주로 사용하는 JavaScript 확장 문법
• JavaScript 코드 안에서 HTML 태그처럼 보이는 코드를 쓸 수 있게 해주는 문법

2.1.1 JSX의 정의

JSX는  JSXElement, JSXAttributes, JSXChildren, JSXStrings 4가지 컴포넌트로 구성되어 있음.

1. JSXElement

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

• JSXOpeningElement : 일반적인 요소 
  • ex) < JSXElement JSXAttributes(optional)>
• JSXClosingElement : JSXOpeningElement 가 종료되었음을 알리는 요소
  • ex) < JSXElement />
• JSXSelfClosingElement : 요소가 시작되고 스스로 종료되는 형태
• JSXFragment : 아무런 요소가 없는 형태로, </>는 불가능하나, <> </>는 가능함

🌚 JSXElementName

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

💡 JSXIdentifier

• JSX 내부에서 사용할 수 있는 식별자를 의미

//가능
function Vaild1(){
	return<$></$>
}

//불가능
function Invaild1(){
	return <1></1>
}

💡 JSXNamespacedName

• JSXIdentifier:JSXIdentifier의 조합, 즉 :을 통해 서로 다른 식별자를 이어주는 것도 하나의 식별자로 취급됨
• :로 묶을 수 있는 것은 한개뿐이고, 두개 이상은 올바른 식별자로 취급되지 않음

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

//불가능
function invaild(){
	return <foo:bar:baz></foo:bar:baz>
}

💡 JSXMemberExpression 

• JSXIdentifier.JSXIdentifier의 조합, 즉 .을 통해 서로 다른 식별자를 이어주는 것도 하나의 식별자로 취급됨
• .을 여러 개 이어서 하는 것이 가능하나, 단 JSXNamespacedName과 이어서 사용하는 것은 불가능함

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

function vaild2(){
	return <foo.bar:.baz></foo.bar.baz>	
}

//불가능
function invaild(){
	return <foo:bar.baz></foo:bar.baz>
}

2. JSXAttributes

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

💡JSXSpreadAtrributes 

• 자바스크립트의 전개 연산자와 동일한 역할을 함
  • {...AssignmentExpression} : AssignmentExpression는 모든 표현식이 존재할 수있으며, 조건문, 화살표 함수, 할당식 등등
• JSXAttribute : 속성을 나타내는 키와 값으로 짝을 이루어서 표현함(Key는 JSXAttributeName,value는  JSXAttributeValue)
  
  • JSXAttributeName :  :를 이용해 키를 나타냄

fcuntion vaild1(){
	return <foo.bar foo:bar="baz"></foo.bar>
}

• JSXAttributeValue : 속성의 키에 할당할 수 있는 값으로 큰따옴표로 구성된 문자열(" "), 작은따옴표로 구성된 문자열(' ')

function Child({attribute}){
	return <div>{attribute}</div>
}

export default function App(){
	return(
    	<div>
        	<Child attribute=<div>hello</div> />
        </div>
    )
}

3. JSXChildren

• JSXElement의 부모와 자식관계 중 자식 값울 나타냄
• JSXChild : 자식의 기본 단위이며, JSXChildren은 JSXChild 을 0개 이상 가질수 있음(없어도 상관없음)
• JSXText : {, < , > ,} 을 제외한 문자열이며, 문자로 표현하고싶다면 아래와 동일하게 사용할 것

function vaild(){
	return <>{'{} <>'} </>
}

• 아래 함수를 리액트에서 렌더링을 하면 "foo"라는 문자열이 출력

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

4. JSXStrings 

• JSX에서도 JavaScript 이스케이프 규칙을 그대로 따름

---

2.1.2 JSX 예제

🌚유효한 JSX구조 

// 하나의 요소로 구성된 가장 단순한 형태
const ComponentA = <A>안녕하세요.</A>

// 자식이 없이 SelfClosingTag로 닫혀 있는 형태도 가능하다.
const ComponentB = <A />

// 옵션을 { }와 전개 연산자로 넣을 수 있다.
const ComponentC = <A {...{ required: true }} />

// 속성만 넣어도 가능하다.
const ComponentD = <A required />

// 속성과 속성을 넣을 수 있다.
const ComponentE = <A required={false} />

const ComponentF = (
	<A>
  		<B text="react" /> // 문자열은 큰따옴표 & 작은 따옴표 가능
    </A>
)

const ComponentG = (
	<A>
  		<B optionalChildren={<>안녕하세요</>} />
  /* 옵션의 값으로 JSXElement를 넣을 수 있다. */
  	</A>
)

const ComponentH = (
	<A>
  		안녕하세요
  		<B text="react" />
  	</A>
)

---

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

• 자바스크립트에서 JSX가 변환되는 방식을 알려면 리액트에서 JSX를 변환하는 @babel/plugin-transform-react-jsx 플러그인을 알아야 함

💡JSX 코드

// JSX 코드
  const ComponentA = <A required={true}>Hi</A>

  const ComponentB = <>Hi<>

  const ComponentC = (
    <div>
      <span>Hi<span>
    </div>
  )

💡JSX코드를 @babel/plugin-transform-react-jsx 플러그인으로 변환한 결과

/ JSX 코드를 @babel/plugin-transform-react-jsx로 변환한 결과
  'use strict'

  var ComponentA = React.createElement(
    A,
    {
      required: true
    },
    'Hi',
  )

  var ComponentB = React.createElement(React.Fragment, null, 'Hi')

  var ComponentC = React.createElement(
    'div',
    null,
    React.createElement('span', null, 'Hi'),
  )

💡JSX가 변환되는 특성을 활용

// props 여부에 따라 children 요소만 달라지는 경우
// 굳이 번거롭게 전체 내용을 삼항 연산자로 처리할 필요가 없다.
// 이 경우 불필요한 코드 중복이 일어난다.
import {createElement, PropsWithChildren} from 'react'

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

// JSX가 변환되는 특성을 활용한다면 다음과 같이 간결하게 처리 할 수 있다.
import {createElement} from 'react'

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

• JSX 반환값이 결국 React.createElement로 귀결된다는 사실을 파악한다면 이런 식으로 쉽게 리팩토링 할 수 있음