"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다.
우분투 환경에서 진행함
문서 객체 모델 (Document Object Model, DOM)
웹 브라우저는 HTML 문서를 화면에 출력할 때 자바스크립트 객체 조합으로 바꾼다. 이 자바스크립트 객체는 모두 자신의 특징에 맞는 인터페이스를 구현하는데, 인터페이스를 총칭하여 문서 객체 모델(DOM)이라고 한다.
DOM은 웹 페이지를 트리 구조로 표현한다. HTML 요소들은 이 트리의 노드로서 추가된다.
Javascript를 사용해서 노드들의 스타일, 속성 등을 업데이트할 수 있다. 즉, DOM은 javascript가 웹 페이지를 쉽게 수정할 수 있게 만든 것이다. ==> 자바스크립트만 사용하는 프런트엔드 개발은 물리 DOM 방식이다.
트리는 root를 항상 가지는데, DOM tree의 root는 document이다.
물리 DOM은 html에서 바로 요소를 생성했다면, 가상 DOM은 react의 createElement방식을 사용해서 생성한 후, 물리 DOM에 부착(=렌더링)하는 방식으로 동작한다. 가상 DOM은 react를 사용한 개발 방식이다.
가상 DOM(VDOM)은 "가상" UI 표현이 메모리에 유지되고 ReactDOM과 같은 라이브러리에 의해 물리 DOM과 동기화되는 프로그래밍 개념이다.
* 렌더링(rendering) : 화면에 무엇인가를 보이게 하는 것
아래 예제는 가상 DOM을 물리 DOM으로 변환하는 간단한 예제이다.
HTML 문서에서 id=root 요소를 찾아 root로 설정해주고, 가상 DOM 요소를 react.createElement 메서드로 생성한다. 그후 render 함수로 생성된 가상 DOM을 물리 DOM 객체에 부착한다. 따라서 root 요소의 자식 요소로 동작한다.
src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//가상 DOM 객체를 부착할 물리 DOM 객체
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
//가상 DOM (pVirtualDOM) 생성
const pVirtualDOM = React.createElement('p', null, "Hello virtual DOM world!")
//가상 DOM 객체를 물리 DOM 객체에 부착: 렌더링 (rendering)
root.render(pVirtualDOM)- root.render 함수: 가상 DOM을 물리 DOM으로 전환해주는 기능
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
<p> 요소가 <div id="root">의 자식 요소로 동작한다.
가상 DOM을 사용하는 이유
물리 DOM 세계에서 속성 값을 바꾸려면, 예를 들어 <p> 내부 구문을 바꾸기 위해서는 id로 찾아야 한다.
document.getElementByID("아이디")로 해당 요소를 찾아 DOM 객체를 얻은 뒤 innerText="~~"를 사용해야 한다. 하지만 요소가 많아지면 각각 서로 다른 id를 부여해야 해서 복잡하고, 업데이트도 어려워진다는 문제가 있다.
이를 해결하기 위해 가상 DOM을 사용하는 것! >>어떻게 해결..?!
출처
https://www.freecodecamp.org/news/reactjs-basics-dom-components-declarative-views/
React.js Basics – The DOM, Components, and Declarative Views Explained
React.js is an open source JavaScript library for creating user interfaces. It was created by Facebook back in 2013. Demand for React developers is skyrocketing, which means that having knowledge of this library is definitely going to be worth it! Some of
www.freecodecamp.org
https://vuejs.org/guide/extras/rendering-mechanism.html
Rendering Mechanism | Vue.js
vuejs.org
https://elmprogramming.com/virtual-dom.html
Beginning Elm
A gentle introduction to Elm programming language
elmprogramming.com
https://blog.logrocket.com/virtual-dom-react/
What is the virtual DOM in React? - LogRocket Blog
React employs the virtual DOM as a strategy to compute minimal DOM operations when re-rendering the UI, following its declarative approach.
blog.logrocket.com
'Web: html ccs javascript react' 카테고리의 다른 글
| [react] Component 컴포넌트와 Props 속성 (1) | 2023.08.31 |
|---|---|
| [react] JSX 구문 이해하기 (0) | 2023.08.30 |
| [react] 가짜 데이터 사용해 보기: chance (0) | 2023.08.29 |
| [react][npm] 리액트-node.js-npm-프런트엔드 개념 알기 (0) | 2023.08.29 |
| [react] 웹팩과 빌드/개발모드로 실행하기 (0) | 2023.08.28 |