Chapter 리액트 동작 원리

02-2 JSX구문 이해하기

React.createElement호출의 복잡성을 해결하고자 J문법에 JSX기능을 언어확장(langauage extension)형태로 추가함

---

src/index.tsx

import ReactDOM from 'react-dom/client';

const rootVirtualDOM = (
  <ul>
    <li>
      <a href="http://www.google.com" target="_blank">
        <p>go to Google</p>
      </a>
    </li>
  </ul>
)

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(rootVirtualDOM)

JSX = JavaScript + XML

XML구문에 자바스크립트 코드 결합하는 용도
React.createElement 호출 코드를 간결하게 하려고 고안한 것

---

XML 용어 알아보기

<div id="root" style="display:flex"> <h1>Hello</h1> </div>
시작태그          속성                   자식요소     끝태그

XML(혹은 HTML5) 표준 준수

• 리액트 JSX작성 시, XML규약 엄격하게 준수

JSX구문에서 중괄호의 의미

<p>
 {*/ string must be wrapped by Text */}
</p>

const hello = "Hello world!"
<p> {hello} </p>

중괄호 안의 JS코드는 반드시 return키워드 없이 값 만을 반환(표현식) 해야 함

표현식과 실행문, 그리고 JSX

표현식 ↔ 실행문(execution statement)
실행문은 그 자체로는 ‘값’이 ❌
if문, switch~case문이나 for문, console.log()를 JSX코드 안에서 사용할 수 ❌

---

배열과 JSX구문

JSX구문은 단순화된 React.createElement 호출이므로 반환 값은 가상 DOM객체
배열이나 변수에 담을 수 있음.

import ReactDOM from 'react-dom/client';

const child = [
  <li>
    <a href="http://www.google.com" target="_blank">
      <p>go to Google</p>
    </a>
  </li>,
  <li>
    <a href="http://www.facebook.com" target="_blank">
      <p>go to Facebook</p>
    </a>
  </li>,
  <li>
    <a href="http://www.twitter.com" target="_blank">
      <p>go to Twitter</p>
    </a>
  </li>
]

const rootVirtualDOM = <ul>{child}</ul>

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(rootVirtualDOM)

JSX문 3개 child 배열에 담아 ul의 자식 컴포넌트로 렌더링

---

배열을 JSX문으로 만들 때 주의사항

JSX의 XML요소는 부모 없이 존재하지 못함
여러 개를 배열로 담은 children변수가 부모 컴포넌트 없이 {children}형태로 존재할 수 ❌

const rootVirtualDOM = {children}

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(rootVirtualDOM)

→ {children}이 자신을 감싸는 부모 요소 없이 독립해서 사용됨

---

데이터 배열을 컴포넌트 배열로 만들기

src/index.tsx

import ReactDOM from 'react-dom/client';

const child = [0,1,2].map((n: number) => <h3>Hello World! {n}</h3>)
const rootVirtualDOM = <div>{child}</div>

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(rootVirtualDOM)

개발자도구 > console : 오류 발생 🚨

src/index.tsx : 1장에서 만들었던 임의의 데이터 이용

import ReactDOM from 'react-dom/client';
import * as D from './data'

const child = D.makeArray(10).map((notUsed, index) => (
  <div key={index}>
    <p>{D.randomId()}</p>
    <p>{D.randomName()}</p>
    <p>{D.randomJobTitle()}</p>
    <p>{D.randomSentence()}</p>
    <p>{D.randomId()}</p>
    <img src={D.randomAvatar()} width={100} height={100} />
  </div>

))
const rootVirtualDOM = <div>{child}</div>

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(rootVirtualDOM)