[React] Element 다루기

멀티 Element 생성

- React.Fragment or <></>를 가지고 여러가지 Element들을 주입 가능

// 1.
const elementOne = (
<React.Fragment
  className="box"
  children={[
    <h1>Hi</h1>,
    // React.createElement("h1", null, "Hi"),
    <h3>Bye</h3>,
    // React.createElement("h3", null, "Bye"),
    <h5>Children</h5>,
    // React.createElement("h5", null, "Children"),
  ]}
/>
);

// 2.
const elementTwo = (
<React.Fragment>
  <h1>hi</h1>
  <h3>Bye</h3>
  <h5>Children</h5>
</React.Fragment>
);

 

---

Element 찍어내기

- Function -> 재사용 가능한 Element

- Custom Element -> Upper case

- Children 제한 -> 없음

const Paint = ({ title, description, children }) => (
<>
  <h1>{title}</h1>
  <h3>{description}</h3>
  {children}
</>
);

const element = (
<>
  <Paint title="Good" description="good">
    <h1>Hi</h1>
  </Paint>
  <Paint title="Bad" description="bad" />
  <Paint title="So so" description="so so" />
</>
);

ReactDOM.render(element, rootElement);