728x90
DOM이란?
먼저, DOM이 뭔지부터 알아보자. DOM은 Document Object Model의 약자로, 웹 페이지의 구조를 나타내는 방식이야. 쉽게 말해, 우리가 HTML 코드를 작성하면 브라우저는 이를 DOM이라는 형태로 변환해서 내부적으로 관리해.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>이런 HTML 코드는 브라우저에서 다음과 같은 트리 구조의 DOM으로 변환돼.
여기서 DOM은 브라우저가 HTML 요소들을 객체 형태로 나타낸 거야.
이렇게 하면 자바스크립트로 이 요소들에 접근하고 조작할 수 있어.
문제점:
DOM의 구조가 복잡해질수록, 즉 트리의 깊이가 깊어질수록, 어떤 요소를 변경할 때마다 브라우저가 업데이트해야 하는 부분이 많아져. 이 때문에 성능 문제가 발생할 수 있어.
가상돔(Virtual DOM)이란?
리액트는 이런 문제를 해결하기 위해 **가상돔(Virtual DOM)**이라는 개념을 도입했어. 가상돔은 실제 DOM의 복사본을 메모리에 만들어두는 거야.
어떻게 동작할까?
- 변경 사항 처리: 리액트에서 어떤 변경이 발생하면, 이 변경 사항을 실제 DOM이 아니라 메모리에 있는 가상돔에 먼저 적용해.
- 비교 작업: 가상돔과 실제 DOM을 비교해서, 변경된 부분만 실제 DOM에 업데이트해. 이 과정을 **"Diffing"**이라고 불러.
- 업데이트: 최종적으로 변경된 부분만 실제 DOM에 반영하기 때문에, 전체 DOM을 업데이트하는 것보다 훨씬 효율적이야.
더보기
예시:
- HTML 코드가 변경됨
- 리액트는 가상돔에 이 변경 사항을 적용
- 가상돔과 실제 DOM을 비교
- 변경된 부분만 실제 DOM에 반영
왜 가상돔이 좋을까?
- 성능 향상: 변경된 부분만 업데이트하니까 불필요한 작업이 줄어들어.
- 효율성: 큰 애플리케이션에서도 빠르게 동작해.
- 개발 편의성: 리액트가 복잡한 DOM 업데이트를 대신 처리해주니까, 우리는 애플리케이션 로직에 더 집중할 수 있어.
이렇게 가상돔 덕분에 리액트는 더 빠르고 효율적인 웹 애플리케이션을 만들 수 있게 도와줘. DOM과 가상돔의 차이점과 장점을 이해하면, 왜 리액트가 많은 개발자들에게 사랑받는지 알 수 있을 거야.
728x90
'웹개발 > REACT' 카테고리의 다른 글
| 리액트 확장자명 헷갈리면 들어와! / .js, .jsx, .tsx (0) | 2024.07.24 |
|---|---|
| 바벨과 웹팩, Vite의 역할: 리액트 개발에서의 필수 도구 이해하기 (2) | 2024.07.23 |
| React 리액트 왜 사용할까? (0) | 2024.07.23 |
| NPM, NPX, YARN, 쉽게 이해해보자! (0) | 2024.07.23 |
| 웹 개발, HTML, CSS, 자바스크립트의 역할 (0) | 2024.05.13 |