🔥React 가상 돔 [Virtual DOM]
React에선 '가상 돔' 사용🙆♀️
👉 실제 DOM[Document Object Model] 조작하는 방식 아니라
실제 DOM을 모방한 가상의 DOM을 구성해서 원래 DOM과
비교해 달라진 부분을 리렌더링 시켜주는 방식으로 작동🔄
가상 돔 잘 이해해야만 React의 '상태' 잘 다룰 수 있음❗
💁♀️Virtual DOM 사용하는 이유
🧐왜 실제 DOM을 조작하지 않는지에 대해서 알아보자
Vanilla JS 이용하여 DOM 조작하는 방식은 무거운 작동방식🧱
👉 실제 DOM엔 브라우저가 화면을 그리는데
필요한 모든 정보 들어있기 때문 ❗❗
리액트➡깜박거림 없이 부드러운 UX를 사용자에게 제공하기 위해
변경사항만 빠르게 파악 후 리렌더링 하기 위해
가상 DOM 만들어 비교하는 방식을 채택🙆♀️✔
리액트는 성능 향상 위해 실제 렌더링 된
UI를 내부적으로 JS 객체로 따로 관리✨
직접 DOM 노드 생성하거나 접근해서 변경 하는 것이
JS 객체로 표현된 DOM 트리 조작하는 것보다 훨씬 느리기 때문
🎄React가 가상 돔을 비교하는 원리
리액트는 실제 DOM의 UI를 가진 JS 객체를 메모리상에 갖고 있음
Vitual DOM
👉 변화 감지하면 재조정(Reconcilation)
과정 통해 실제 DOM과 동기화
🔍재조정 과정 3단계
- UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링
( 실제 화면 상에 렌더링❌, 비교를 위한 가상 렌더링⭕ )- 현재 Virtual DOM & 이전 Virtual DOM 비교해 차이 계산
- 변경된 부분을 실제 DOM에 반영🤗
🌫React 얕은 비교 [Shallow Compare]
React는 노드를 비교할 때 얕은 비교함
먼저 JS의 원시 & 참조 자료형에 대한 이해 필요🤔
📌원시 자료형 [Primitive Data Type]
👉 객체 아니면서 동시에 메소드도 갖지 않는 자료형
▶ string, number, bigint, boolean, undefined, symbol, null
배열, 객체와 달리 하나의 데이터만 갖고 있음☝🙆♀️
값 자체의 변경 불가능한 데이터✅
📌참조 자료형 [Reference Data Type]
👉 원시 자료형 아닌 모든 자료형이 참조 자료형
( 대표적 : 배열, 객체, 함수 )
대부분이 자료의 양이 여러 개 일 때 사용되기에
데이터의 저장공간 효율적으로 관리하기 위해 참조적으로 관리
ex 1 )
let a = 1;
let b = a;
console.log(a === b); // truelet a = 1;
let b = 1;
console.log(a === b); // true변수 a에 원시 자료형인 숫자 1 할당하고
변수 b에 변수 a 할당한 뒤 두 변수의 값 같은 지 확인해보면 true 나옴
ex 2 )
// 얕은 복사
const a = [1,2,3];
const b = a;
console.log(a === b); // true// 깊은 복사
const a = [1,2,3];
const b = [1,2,3];
console.log(a === b); // false🤷♀️왜 false 일까❓➡주소 값이 달라서❗
ex 3 )
const a = [1,2,3];
const b = a;
b.push(4);
console.log(a); // [1,2,3,4]같은 배열 공간을 참조하고 있기에
데이터를 추가할 경우 같은 참조 공간이 변경된 것🔥
🌟참조형 데이터 다룰 땐 원본의 변경 신경 쓰면서 로직 작성하는 것 중요
🙆♀️리액트의 얕은 비교는 같은 레벨에서만 일어남
- 숫자, 문자열, Boolean과 같은 원시 자료형은 값을 비교
- 배열, 객체 등 참조 자료형은 그 안의 값 혹은
속성 비교하지 않고 그들의 레퍼런스(참조되는 위치)를 비교
그러므로 배열을 직접 수정하는 방식
ex - push, pop 과 같은 메소드로 배열 수정한 뒤 setState에 담아주어도
기본적으로 같은 참조 위치를 갖고 있기에 값의 변화 감지하지 못함✅
안녕하세요! 퍼블리싱 & 프론트엔드 개발 공부 블로그 입니다!