React with CDN & CreateElement

dwell·2022년 2월 26일

React를 시작하는 가장 간단한 방법은 Create-React-App (CRA)를 사용하는 것이다.

하지만, CRA는 무겁기 때문에 정말 정말 간단한 리액트를 사용할 경우 CDN을 이용하는 것도 방법이다.

🔷 CDN 이용방법

index.html 생성후 아래 script를 추가한다. https://ko.reactjs.org/docs/cdn-links.html

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

네트워크 탭을 확인하면 react와 react-dom이 있는 것을 확인할 수 있다.

콘솔에 찍어보면 React와 ReactDOM이 접근가능하다 → cdn이 global 변수로 만들어주기 때문

🔷 createElement 이용해서 컴포넌트 만들기

자바스크립트에서의 createElement 자바스크립트에서도 createElement를 사용할 수 있지만 tag만 생성이 가능했다.
class를 설정하거나, id를 설정하거나, 텍스트를 집어넣을 때각각 다른 메소드를 사용해야 했다.
```
const div = document.createElement('div');
div.innerText = 'Hello World'
div.className = 'container';
div.setAttribute('id', 'div1');

console.log(div);  // <div class="container" id="div1">Hello World</div>
```

React에서의 createElement

React에서 제공하는 createElement는 JSX 대신 컴포넌트 생성이 가능한 메소드이다.
React.createElement(tagName, ?attributes, ?child) 형식으로 쓸 수 있다.
여기서 중요한 것은 tagName 대신에 react component를 집어넣을 수 있다는 것이다!!
(JSX처럼 그냥 컴포넌트 이름만 쓰는 것이 아닌 React.createElement안에 써줘야한다. <> 로 감싸는 것도 안된다. )

그리고 여러개의 태그를 추가하고 싶은 경우 (형제) 배열을 써도 되고, , 로 구분만 해줘도 된다.

const Child = () => {
  return React.createElement(
    "p",
    {},
    "child element!"
  );
};

const Parent = () => {
  return React.createElement("ul", {}, [
    React.createElement("li", {}, "list item 1"),
		React.createElement("li", {}, "list item 2"),
    React.createElement(Child),     // <Child /> (x)
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Hello World!"),
    React.createElement(Parent),
  ]);
};

// 결과물

<div>
	<h1>Hello World!</h1>
	<ul>
		<li>list item 1</li>
		<li>list item 2</li>
		<p>child element!</p>
	</ul>
</div>

🔷 React 18 vs React 17 : root render

React18으로 넘어오면서 concurrency mode를 내부에 넣음으로써 이전 버전들과 index.js에 코드 변화가 생겼다.

React17

ReactDOM.render(root component, 넣을 위치) 형식으로 작성해야 한다.

<body>
    <div id="root"></div>

		//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>
			const App = () => React.createElement("h1", {}, "Hello World");
	    ReactDOM.render(React.createElement(App), document.getElementById("root"));
		</script>
</body>

React18

ReactDOM.render 대신 ReactDOM.createRoot(rootNode).render 을 사용해야 한다.

<body>
    <div id="root"></div>

		//cdn
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
		
		<script>
			const App = () => React.createElement("h1", {}, "Hello World");
	    ReactDOM.createRoot(document.getElementById("root").render(React.createElement(App));
		</script>
</body>

Final Code

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Adopt Me</title>
    <link href="./styles.css" rel="stylesheet" />
  </head>
  <body>
    <div id="root">not rendered</div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script>
      const Child = () => {
        return React.createElement("p", {}, "child element!");
      };

      const Parent = () => {
        return React.createElement("ul", {}, [
          React.createElement("li", {key: 'item1'}, "list item 1"),
          React.createElement("li", {key: 'item2'}, "list item 2"),
          React.createElement(Child, {key: 'item3'}),
        ]);
      };

      const App = () => {
        return React.createElement("div", {}, [
          React.createElement("h1", {key: 'child1'}, "Hello World!"),
          React.createElement(Parent, {key: 'child2'}),
        ]);
      };

      const rootNode = document.getElementById("root");
      ReactDOM.createRoot(rootNode).render(React.createElement(App));
    </script>
  </body>
</html>

dwell

code for a change

다음 포스트

React with CDN & CreateElement

🔷 CDN 이용방법

🔷 createElement 이용해서 컴포넌트 만들기

🔷 React 18 vs React 17 : root render

React with CDN & CreateElement

0개의 댓글