✅ <Fragment> or <>

import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>안녕 리액트!</h1>,
  <h1>안녕 자바스크립트</h1>,
  document.getElementById('root')
);

▶ 해당 코드로 쓰면 에러가 발생한다. 왜냐하면 render(argument1, argument2)의 형태만 가능하고, html 코드가 2줄 이상이 되면 작동하지 않기 때문이다. 그래서 div로 묶어주거나, <Fragment></Fragment>로 묶어주거나 <></>의 형태로 묶어주어야 출력이 된다.

• 올바른 예시 (<>html.code</>)

import ReactDOM from "react-dom";

ReactDOM.render(
  <>
    <h1>안녕 리액트!</h1>
    <h1>안녕 자바스크립트</h1>
  </>,
  document.getElementById("root")
);

☑️ 가위바위보 프로젝트 진행 1

import ReactDOM from 'react-dom';

ReactDOM.render(
  <>
    <h1 id="title">가위바위보</h1>
    <button className="hand">가위</button>
    <button className="hand">바위</button>
    <button className="hand">보</button>
  </>,
  document.getElementById('root')
);