Atomic Habits

React. ch1. 04. 멀티 Element 생성하기 본문

IT/React

React. ch1. 04. 멀티 Element 생성하기

체계성 2021. 10. 9. 17:02

○ 코드

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- 리액트를 사용하기 위한 CDN -->
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/@babel/standalone/babel.min.js"
    ></script>

 

    <div id="root1"></div>
    <div id="root2"></div>
    <div id="root3"></div>
    <div id="root4"></div>
    <div id="root5"></div>

    <!-- babel이 읽고 컴파일 후 js 식으로 표현할 영역 type="text/babel" -->
    <script type="text/babel">
      // 1) 리액트에서는 하나의 태그(div, etc)를 만들어야만 그 안에 children을 주입할 수 있다.
      const rootElement1 = document.getElementById("root1");
      const element1 = (
        <div
          className="box"
          children={[
            React.createElement("h1", null, "A1"),
            React.createElement("h2", null, "B1"),
            React.createElement("h3", null, "C1")
          ]}
        />
      );
      ReactDOM.render(element1, rootElement1);

      // 2) 추가적인 부모 태그 생성 없이 rootElement에 주입하려면
      //    리액트플래그먼트를 활용해보자.
      const rootElement2 = document.getElementById("root2");
      const element2 = (
        <React.Fragment
          children={[
            React.createElement("h1", null, "a2"),
            React.createElement("h2", null, "b2"),
            React.createElement("h3", null, "c2")
          ]}
        />
      );
      ReactDOM.render(element2, rootElement2);

      // 3) React.createElement를 JSX 표기법으로 변환1  (children 직접 주입 O)
      const rootElement3 = document.getElementById("root3");
      const element3 = (
        <React.Fragment children={[<h1>D3</h1>, <h2>E3</h2>, <h3>F3</h3>]} />
      );
      ReactDOM.render(element3, rootElement3);

      // 4) React.createElement를 JSX 표기법으로 변환2 (children 직접 주입 X)
      //    더 HTML 스타일에 가까운 표현식
      const rootElement4 = document.getElementById("root4");
      const element4 = (
        <React.Fragment>
          <h1>d4</h1>
          <h2>e4</h2>
          <h3>f4</h3>
        </React.Fragment>
      );
      ReactDOM.render(element4, rootElement4);

      // 5) React.createElement를 JSX 표기법으로 변환3 (children 직접 주입 X)
      //    더 HTML 스타일에 가까운 표현식
      //    <React.Fragment>의 간소화
      const rootElement5 = document.getElementById("root5");
      const element5 = (
        <> 
          <h1>d5</h1>
          <h2>e5</h2>
          <h3>f5</h3>
        </>
      );
      console.log(element5);
      ReactDOM.render(element5, rootElement5);
    </script>
    </script>
  </body>
</html>

 

'IT > React' 카테고리의 다른 글

React. ch1. 07. Review  (0) 2021.10.10
React. ch1. 06. JS와 JSX 섞어쓰기  (0) 2021.10.10
React. ch1. 05. Element 찍어내기  (0) 2021.10.09
React. ch1. 02. DOM에 대한 이해  (0) 2021.10.09
React. ch1. 01. React 란?  (0) 2021.10.09
'IT/React' Related Articles more
Comments