반응형

1. DOM? 

Document Object Model의 약자이며, XML이나, HTML 문서에 접근하기 위한 인터페이스라고 보면 된다. 

위와 같은 계층 구조로 나타나 있으며, 자바스크립트를 사용해서 문서의 요소를 변경, 수정, 삭제할 수 있다. 

 

2. Element

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
    <script>
        const rootElemnet = document.getElementById("root");
        const element = document.createElement("h1");

        element.textContent = "Hello, world";

        rootElemnet.appendChild(element)
    </script>
</body>
</html>

html 태그를 사용하지 않고, 자바스크립트로 직접 만들 수 있다. 

 

이것을 React에서 어떤 방식으로 사용할까? 

3. React에서의 Element 다루기

<!DOCTYPE html>
<html lang="en">
  <body>
    <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>

    <div id="root"></div>
    <script>
      const rootElemnet = document.getElementById("root");
      // const element = document.createElement("h1");

      const element = React.createElement("h1", { children: "Hello, world" });

      ReactDOM.render(element, rootElemnet);

      // element.textContent = "Hello, world";
      // rootElemnet.appendChild(element)
    </script>
  </body>
</html>

보는 바와 같이 React에서도 Element를 생성, 수정을 할 수 있다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 패스트캠퍼스' 카테고리의 다른 글

[React - 기초] Portals  (2) 2022.03.17
[React - 기초] Memoization  (2) 2022.03.15
[React - 기초] Hooks  (0) 2022.03.10
[React - 기초] React와 리랜더링  (0) 2022.03.09
[React - 기초] JSX, Babel  (0) 2022.03.08

티스토리툴바