React - Dom 다루기

 

Dom

 

먼저 Dom(Document Object Model)에 대해서 알아보자

• 문서 객체 모델(Dom)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결한다.
• Dom은 문서를 논리 트리로 표현한다.

 

---

 

연습 환경 (CodeSandBox)

 

React 등 다양한 환경에 대한 기본 설정이 되어있음

 

https://codesandbox.io/

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

 

---

 

바닐라JS (순수 자바스크립트)로 Hello, world! 띄우기

 

 

 

---

 

CDN

 

Content Delivery Network의 약자

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

 

https://ko.reactjs.org/docs/cdn-links.html

CDN 링크 – React

 

---

 

React로 Hello, world! 띄우기

 

 

---

 

해당 예제 공식 문서 확인

 

https://ko.reactjs.org/docs/react-api.html#createelement

React 최상위 API – React

 

https://ko.reactjs.org/docs/react-dom.html#render

ReactDOM – React