Atomic Habits

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

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>

 

 

 

 

 

 

 

'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. 04. 멀티 Element 생성하기  (0) 2021.10.09
React. ch1. 01. React 란?  (0) 2021.10.09
'IT/React' Related Articles more
Comments