Virtual DOM

개념 설명

메모리에 존재하는 가상 DOM 트리로, 실제 DOM 조작을 최소화하여 성능을 최적화하는 React의 핵심 메커니즘.

핵심 포인트

실제 DOM보다 가벼운 JavaScript 객체로 구성
상태 변경 시 새로운 Virtual DOM 트리 생성
이전 Virtual DOM과 비교하여 차이점만 실제 DOM에 반영 (Diffing)
배치 업데이트로 DOM 조작 최소화 및 성능 향상
개발자는 직접 DOM을 조작하지 않고 상태 변경에만 집중

예시 코드

// Virtual DOM 동작 예시
function Counter() {
  const [count, setCount] = useState(0);
  
  // 상태 변경 시 Virtual DOM이 다음과 같이 변화
  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </div>
  );
}

더 많은 내용을 확인하세요! 📚

“Virtual DOM”의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.

✨ 모든 기술 문서 무제한 액세스

📝 실습 예제와 상세한 코드 설명

🎯 면접 예상 질문과 답변 가이드

플랜 비교하기