2021. 7. 11. 16:55ㆍ프론트엔드/HTML, CSS, Javascript
React를 하다가 ref에 대한 내용을 공부하려 하는데,
이 ref를 알기 전에 DOM을 먼저 공부해야겠다고 생각했다.
DOM이란?
DOM은 Document Object Model, 문서 객체 모델이다.
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
DOM 소개 - Web API | MDN
이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML (en-US) 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에
developer.mozilla.org
html과 xml 문서의 프로그래밍 인터페이스를 제공한다고 한다...
이게 뭔소리지
우선 Document가 무엇인지 알아야 한다.
Document, 즉 문서란 여기서 웹페이지를 뜻한다.
우리가 이 문서를 브라우저에 전달하면 웹 브라우저가 그에 맞게 표현을 해주는 것이다.
일종의 작업지시서이고,
브라우저가 이 문서를 보고 실제 작업(rendering)을 하는 것이다.
좀 더 정확한 내용을 위해 w3schools의 설명을 보자
https://www.w3schools.com/js/js_htmldom.asp
JavaScript HTML DOM
JavaScript HTML DOM With the HTML DOM, JavaScript can access and change all the elements of an HTML document. The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is con
www.w3schools.com
HTML DOM이란, HTML을 이루는 오브젝트, 이벤트, 함수에 접속하는 규격이다.
머리를 굴려가며 이해를 하는 중인데 이런 내용인 것 같다.
우리가 만약에 <body>의 내용을 바꾸고 싶다.
근데 body의 자식을 가져오는 방법은?
body가 어떤 함수를 가지고 있는지는?
우리가 class 키워드로 선언해서 클래스의 속성을 명시하듯,
HTML Object의 속성을 명시하는 것이 DOM이다
Javascript의 역할은?
위의 열심히 그림판으로 그린 내용을 보면 알 수 있듯,
기본적으로 HTML 문서를 통해 정적인 HTML Object가 구성이 된다.
이러한 HTML Object를 동적으로 수정할 수 있게 하는 것이 스크립트언어이다.
이 스크립트 언어중에 가장 많이 사용되는 것이 php와 javascript인 것이다.
(php는 주로 서버사이드, javascript는 주로 클라이언트사이드다)
약간 비유를 하자면 HTML 문서는 디자인 초안이고,
Javascript는 기획자가 뒤에서 '거기서 뭐뭐 해주세요'하는 후속 작업 느낌...
그렇다면 React DOM이란?
https://www.geeksforgeeks.org/reactjs-reactdom/
ReactJS | ReactDOM - GeeksforGeeks
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
www.geeksforgeeks.org
위 페이지에서 설명하는 바로는,
render, findDOMNode 등을 통하여 html을 관리하는 효율적인 API들을 제공한다.
HTML Object에 접근하는 기존 DOM과는 다른 애 정도로 생각하면 될 것 같다.
'프론트엔드 > HTML, CSS, Javascript' 카테고리의 다른 글
| Javascript Prototype 오염 (0) | 2022.04.21 |
|---|---|
| 브라우저 객체 모델 - BOM (0) | 2022.04.21 |
| [HTML] 글자 사이에 원하는 길이만큼 공백 넣기 (feat. React) (0) | 2022.02.08 |
| CSS에서 Flex를 해보자. (0) | 2021.10.19 |
| JS, HTML 복습 (메모용) (0) | 2021.08.09 |