IT/React

React. ch1. 02. DOM에 대한 이해

체계성 2021. 10. 9. 10:58

○ DOM

 Document Object Model

 문서를 논리 트리로 표현한다.

 MDN - Web 개발에 필요한 표준 정의

 (https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model)

 

 element는 보여지는 요소(출력된 글자, 버튼 등)

 DOM은 컴퓨터가 이해하는 element의 원형이다.

 

○ 순수 자바스크립트 ( = Vanilla Js)

 - 특정 플러그인, 라이브러리, 프레임워크를 사용하지 않은 그 자체의 자바스크립트

 - (https://www.w3schools.com/)

 

○ 샌드박스 

 CodeSandBox.io - 코드를 실행해보고 테스트하는 사이트 (계정 만들자)

 static(HTML 기본 파일) 클릭 > 기본 자바스크립트 작업을 웹에서 실행

 

○ CDN

 - 웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템

 - React 라이브러리를 html 문서에 주입해서 사용해보자.

   구글링 react document cdn > 아래 두 줄 복사 후 사용할 html에 붙여넣기 > 바로 react 사용 가능

[개발용]
<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="..."></script> : CrossOrigin 속성 추가 권장 

[배포용]
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

 

 

○ 코드

<!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>

    <div id="root1"></div>
    <div id="root2"></div>
    
    <script>
      // 일반적인 자바스크립트 코드
      const rootElement1 = document.getElementById("root1");
      const element1 = document.createElement("h1");
      element1.textContent = "hello";
      rootElement1.appendChild(element1);
      console.log(element1); // <h1>hello</h1>

      // 리액트 코드
      const rootElement2 = document.getElementById("root2");
      //const element2 = React.createElement("h1", { children: "hello2" });
      const element2 = React.createElement("h1", null, "hello2"); // 위와 동일
      ReactDOM.render(element2, rootElement2);
      console.log(element2); // <h1></h1>
    </script>
  </body>
</html>