React - JSX로 마크업 작성하기

Web이 더욱 인터랙티브해지면서, 로직이 내용을 결정하는 경우가 많아짐. -> JS가 HTML을 담당하게 됨.

React에서 렌더링 로직과 마크업이 같은 위치 (= 컴포넌트)에 함께 있게 됨.

React Component : React가 브라우저에 마크업을 렌더링할 수 있는 JS 함수.

• 이 때 React 컴포넌트가 마크업을 나타낼 수 있는 방법이 JSX

JSX의 규칙

1. 하나의 root element로 반환하기

• 한 컴포넌트에서 여러 element를 반환하기 위해서는 하나의 부모 태그로 감싸야 한다.
  • <div> 또는 <> 와 </>(Fragment)
• 이유: JSX는 HTML처럼 보이지만 내부적으로 일반 JS로 객체로 변환됨. 하나의 배열로 감싸지 않은 함수에서는 두 객체 반환 불가

2. 모든 태그는 닫아주기

• <img> -> <img/>

3. 대부분 camal-case로

• className

---

HTML을 JSX로 변환하기

export default function Bio() {
  return (
    <div class="intro">
      <h1>Welcome to my website!</h1>
    </div>
    <p class="summary">
      You can find my thoughts here.
      <br><br>
      <b>And <i>pictures</b></i> of scientists!
    </p>
  );
}

올바르게 변환 이후

export default function Bio() {
  return (
    <div>
      <div className="intro">
        <h1>Welcome to my website!</h1>
      </div>
      <p className="summary">
        You can find my thoughts here.
        <br /><br />
        <b>And <i>pictures</i></b> of scientists!
      </p>
    </div>
  );
}