[React] React와 DOM

리액트 (React)

UI를 만들기 위한 JavaScript 기반의 라이브러리

매번 서버로부터 html 파일을 받아오지 않더라도 js 조작함으로써 새롭게 페이지 조작 가능

​

리액트의 특징

1. 선언형

필요한 컴포넌트만 렌더링

2. 컴포넌트 기반

컴포넌트에서 상태를 관리

재사용해서 생산성 향상

3. Virtual DOM

실제 DOM과 동일

리플로우/리페인트(브라우저 렌더링) 최소화 -> 절차 간소화

​

이때 DOM은 무엇일까?

먼저 내친구 지피티한테 물어봤다.

​

지피티 says

DOM은 "문서 객체 모델"의 약자로,

웹 페이지의 구조화된 내용을 프로그래밍적으로 조작할 수 있는 인터페이스를 제공하는 웹 기술입니다.

HTML, XHTML 또는 XML 문서의 각 요소를 객체로 취급하여 스크립트 언어(주로 자바스크립트)를 사용하여 해당 요소들을 조작할 수 있도록 합니다.

DOM은 웹 페이지의 요소들을 계층 구조로 표현하며, 각 요소를 노드(Node)라고 부릅니다.

이 노드들은 부모-자식 관계로 구성되며, 각각의 노드는 해당 요소의 속성, 내용, 자식 요소 등을 포함하고 있습니다. 이를 프로그래밍을 통해 동적으로 수정하거나 조작할 수 있습니다.

웹 페이지에서 DOM을 활용하면 다음과 같은 작업들을 할 수 있습니다:

• 웹 페이지 내용을 동적으로 변경하거나 업데이트
• 사용자의 상호작용에 따른 동적인 반응 구현
• 웹 페이지의 스타일 변경
• 웹 페이지의 구조 변경

DOM은 웹 개발에서 중요한 개념으로, 웹 애플리케이션을 보다 동적이고 사용자 친화적으로 만드는 데 도움을 줍니다.

​

역시 체고체고 ~.~

이번엔 구글링을 조금 해봤다.

​

DOM은 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게 연결시켜주는 역할을 담당한다.

트리 자료 구조로 구축이 되기 때문에, html 문서는 최종적으로 하나의 최상위 노드 (root 노드)에서 시작해

자식 노드들을 가지며, 아래로만 뻗어나가는 구조로 만들어지게 된다.

​

<JavaScript와 DOM의 관계>

둘이 같은 개념이 아님 ! !

자바스크립트는 DOM을 조작할 수 있는 프로그래밍 언어 중에서 가장 유명한 언어다

꼭 자바스크립트로만 DOM을 다룰 수 있는 것도 아님 ! !

DOM은 어떤 프로그래밍 언어에 의존하지 않는 독립적인 인터페이스

​

그러나 현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐이라 그런 오해가 생긴거고,

만일 브라우저가 자바스크립트 외에 다른 언어를 지원하게 된다 하더라도 DOM은 프로그래밍 언어와 독립적으로 구현된다.

​

(참고)

https://www.codestates.com/blog/content/dom-javascript

문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법 - 코드스테이츠 공식 블로

 

​