JSX

✔️JSX 개념

• A systax extension to JavaScript
• JavaScript + XML/HTML

// 왼쪽: JS, 오른쪽: HTML
const element = <h1>Hello, world!</h1>;

---

✔️JSX 사용O/사용X 비교

React의 createElement(): JSX 코드를 JS코드로 변환하는 것

예시 코드1

• JSX 이용O

class Hello extends React.Component{
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat = "World" />,
  document.getElementById('root')
);

• JSX 이용X

class Hello extends React.Component{
	render(){
      return React.createElement('div', null, `Hello ${this.props.toWhat}`);
    }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

예제 코드2

• JSX 이용O

const element = (
  <h1> className = "greeting">
    Hello, World!
  </h1>

• JSX 이용X

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, World!'
)

---

✔️React.createElement()

위에서 말했듯이 React.createElement()를 통해 JSX코드가 JS코드로 변환된다.

위의 코드가 React.createElemet()의 결과로 아래와 같은 객체로 생성된다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, World!'
  }
}

createElement()의 parameter

React.createElement(
  type,
  [props],
  [...childer]
)

type: element 유형(타입). div나 span과 같은 HTML 태그가 올 수도 있고 다른 컴포넌트가 올 수도 있음
props: 속성
children: 현재 element가 포함하고 있는 자식 element

• 리액트에서 JSX를 쓰는 것이 필수는 아니지만, JSX를 사용하면 장점들이 많기 때문에 편리함

---

✔️JSX 장점

• 가독성 향상
• 버그 발견하기 쉬움
• Injection Attacks 방어

✔️JSX 사용예시

function formatName(user){
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Ming',
  lastName: 'Kim'
};

const element = (
  <h1>
  	Hello, {formatUser(user)}
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

// user의 이름에 따라 다른 인삿말을 표시하는 컴포넌트
function getGreeting(user){
  if (user){
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>
}

✏️태그의 속성(attribute)에 값 넣는 방법

//큰 따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0"></div>;

//중괄호 사이에 자바스크립트 코드를 넣으면 됨
const element = <img src={user.avatarUrl}></img>;

✏️children 정의하는 방법

const element = (
  <div>
    <h1>안녕하세요</h1>
    <h2>열심히 리액트를 공부해 봅시다!</h2>
  </div>
)

---

👩‍💻 JSX 이용한 간단 실습 코드

• Book.jsx

import React from "react";

function Book(props) {
  return (
    <div>
      <h2>{`책 이름: ${props.name}`}</h2>
      <h3>{`${props.name}의 페이지 수: ${props.numOfPage}페이지`}</h3>
    </div>
  );
}

export default Book;

• Library.jsx

import React from "react";
import Book from "./Book";

function Library(props) {
  return (
    <div>
      <Book name="처음 만난 파이썬" numOfPage={300} />
      <Book name="처음 만난 자바" numOfPage={51} />
      <Book name="처음 만난 리액트" numOfPage={210} />
    </div>
  );
}

export default Library;

• index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

import Library from './ch03/Library'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>
);

reportWebVitals();

• 실행결과

---

• JSX를 이용하지 않았을 때 Book.jsx

import React from "react";

function Book(props) {
  return React.createElement("div", null, [
    React.createElement(
      "h1", 
      null, 
      `책 이름: ${props.name}`),
    React.createElement(
      "h2",
      null,
      `${props.name}의 페이지 수: ${props.numOfPage}페이지`
    ),
  ]);
}

export default Book;