DOM 이란? & React와 ReactDOM 차이

728x90

🔥 DOM 이란?

문서객체모델(Document Object Model)이다
문서 객체란? : <html>이나 <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만드는 것(HTML 문서를 객체화한 것)을 문서 객체라고 한다

DOM은 HTML, XML 문서의 프로그래밍 interface이며, 개발자가 작성해 놓은 HTML문서를 브라우저가 해석해서 만들어 놓은 것이다
쉽게 말하면 DOM은 Javascript로 html을 조작하기 위해 존재한다
그렇다고 해서 html을 직접 조작하는 것은 아니고, dom을 접근해 조작함으로써 html에 변화가 일어난다

DOM 조작

document.querySelector('title').innerText = "제목"

이 세 단계를 통해서 HTML을 조작할 수 있다

DOM에는 위에서의 innerText와 같이, HTML을 조작하기 위한 API(method 및 property)가 존재한다

다양한 API를 사용해서 HTML 요소의 추가 삭제 등 다양한 조작이 가능하다

🔥 React

🔥 ReactDOM

브라우저의 DOM에서 React를 사용하기 위한 라이브러리이며, Web Interface로 실제 HTML요소를 화면에 불러오는 역할을 한다
ReactDOM은 1개의 컴포넌트를 render 한다
- <App/> 안에는 즉, App.js 파일 안에는 실제로 여러 개의 컴포넌트가 있고 만들 수 있지만 출력은 <App/>이라는 이름을 가진 하나의 컴포넌트만 render 한다(react 실행 흐름에서..)

리액트를 사용해 웹 사이트에 올려놓고 싶다 > reactDOM
리액트를 사용해 앱에 올리고 싶다 > reactNative

※ Reference

728x90

React 상태 관리 Recoil (feat. useState와 차이점) (4)	2024.10.08
npm i create-react-app 와 npx create-react-app my-app 의 차이점 (1)	2024.10.06
리액트 실행 흐름 [ Index.js, App.js, Index.html ] (0)	2024.07.12
create-react-app(CRA) 정리 (0)	2024.07.08
리액트[기초] 라이프사이클 메서드 (0)	2022.05.29

DevGrit