React/React.createElement.html at master · Saseungwon/React · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
</head>
<body>

  <div id="root"></div>
  <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 type="text/javascript">
    console.log(React);
    console.log(ReactDOM)

    // React.createElement(
    //   type, // 태그 이름 문자열 or 기존에 작성한 리액트 컴포넌트 or React.Fragment
    //   [props], // 리액트 컴포넌트에 넣어주는 데이터 객체
    //   [...children] // 자식으로 넣어주는 요소들
    // );

    // 1. 태그 이름 문자열 type
    // <h1>type 이 "태그 이름 문자열" 입니다.</h1>
    ReactDOM.render(
      React.createElement('h1', null, `type 이 "태그 이름 문자열" 입니다.`),
      document.querySelector('#root')
    );

    // 2. 리액트 컴포넌트 type
    // <Component></Component> => <p>type 이 "React 컴포넌트" 입니다.</p>
    const Component = () => {
      return React.createElement(
        'p',
        null,
        `type 이 "React 컴포넌트" 입니다.`
      );
    };

    ReactDOM.render(
      React.createElement(Component, null, null),
      document.querySelector('#root')
    );


    // 3. React.Fragment
    // type이 "React Fragment" 입니다.  // 위에 두 가지 방법과는 다르게 태그 없이 최상위 태그에 들어가짐
    // root인 div 밑에 바로 배열처럼 요소를 넣고싶으면 Fragment 사용
    ReactDOM.render(
      React.createElement(
        React.Fragment,
        null,
        `type이 "React Fragment" 입니다.`
      ),
      document.querySelector('#root')
    );


    // 4. 복잡한 React Element 모임 (React.createElement의 한계)
    // Ex => <div><div><h1>주제</h1><ul><li>Vue</li><li>React</li></ul></div></div>
    ReactDOM.render(
      React.createElement(
        "div",
        null,
        React.createElement(
          "div",
          null,
          React.createElement("h1", null, "주제"),
          React.createElement(
            "ul",
            null,
            react.createElement("li", null, "React"),
            react.createElement("li", null, "Vue"),
          )
        )
      ),
      document.querySelector('#root')
    );
  </script>

</body>
</html>