🚀 성능 최적화: Virtual DOM을 더 빠르게!

지금까지 기본적인 Virtual DOM을 구현해봤어. 하지만 실제 프로덕션 환경에서는 더 많은 최적화가 필요해. 2025년 현재 가장 많이 사용되는 최적화 기법들을 알아보자! 💨

1. 키(Key) 사용하기

리스트 렌더링에서 키는 정말 중요해! 키를 사용하면 Virtual DOM이 요소의 변경, 추가, 삭제를 더 효율적으로 파악할 수 있어. 우리 구현에도 이 기능을 추가해보자:

// VNode 클래스에 key 속성 추가
class VNode {
  constructor(tagName, props, children) {
    this.tagName = tagName;
    this.props = props || {};
    this.key = props.key; // 키 속성 추가
    this.children = children || [];
  }
}

// updateElement 함수 수정 (키 기반 비교 추가)
function updateElement(parent, newNode, oldNode, index = 0) {
  // ... 기존 코드 ...
  
  // 키가 있는 경우 키 기반으로 자식 노드 비교
  if (newNode.children.some(child => child.key != null)) {
    updateChildrenWithKeys(
      parent.childNodes[index],
      newNode.children,
      oldNode.children
    );
  } else {
    // 기존 방식대로 인덱스 기반 비교
    const newLength = newNode.children.length;
    const oldLength = oldNode.children.length;
    const maxLength = Math.max(newLength, oldLength);
    
    for (let i = 0; i < maxLength; i++) {
      updateElement(
        parent.childNodes[index],
        newNode.children[i],
        oldNode.children[i],
        i
      );
    }
  }
}

// 키 기반 자식 노드 비교 함수
function updateChildrenWithKeys(parent, newChildren, oldChildren) {
  // 이전 자식 노드들을 키로 맵핑
  const oldKeyMap = {};
  oldChildren.forEach((child, i) => {
    if (child.key != null) {
      oldKeyMap[child.key] = { node: child, index: i };
    }
  });
  
  let lastIndex = 0;
  
  // 새 자식 노드들을 순회하며 처리
  newChildren.forEach((newChild, i) => {
    const key = newChild.key;
    
    if (key == null) {
      // 키가 없는 경우 일반적인 방식으로 처리
      updateElement(parent, newChild, oldChildren[i], i);
      return;
    }
    
    const oldChildInfo = oldKeyMap[key];
    
    if (oldChildInfo) {
      // 키가 일치하는 이전 노드가 있는 경우
      const oldChild = oldChildInfo.node;
      const oldIndex = oldChildInfo.index;
      
      // 노드 업데이트
      updateElement(parent, newChild, oldChild, oldIndex);
      
      // 노드 위치 이동이 필요한 경우
      if (oldIndex < lastIndex) {
        const currentNode = parent.childNodes[oldIndex];
        parent.insertBefore(currentNode, parent.childNodes[i]);
      } else {
        lastIndex = oldIndex;
      }
    } else {
      // 새로운 키인 경우 노드 추가
      const newElement = createElement(newChild);
      
      if (i < parent.childNodes.length) {
        parent.insertBefore(newElement, parent.childNodes[i]);
      } else {
        parent.appendChild(newElement);
      }
    }
  });
  
  // 새 자식 노드에 없는 이전 키를 가진 노드 제거
  for (const key in oldKeyMap) {
    if (!newChildren.some(child => child.key === key)) {
      const oldIndex = oldKeyMap[key].index;
      parent.removeChild(parent.childNodes[oldIndex]);
    }
  }
}
    

이제 리스트 렌더링에서 키를 사용할 수 있어! 예를 들어, 할 일 목록을 렌더링할 때:

function createTodoList(todos) {
  return h('ul', {}, 
    todos.map(todo => 
      h('li', { key: todo.id }, todo.text)
    )
  );
}
    

이렇게 하면 할 일 항목이 추가, 삭제, 순서 변경될 때 Virtual DOM이 훨씬 효율적으로 실제 DOM을 업데이트할 수 있어. 🔑

2. 메모이제이션(Memoization) 활용하기

동일한 입력에 대해 동일한 Virtual DOM 트리를 반환하는 컴포넌트는 메모이제이션을 통해 불필요한 재계산을 방지할 수 있어:

// 메모이제이션 함수
function memoize(fn) {
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    
    if (cache.has(key)) {
      return cache.get(key);
    }
    
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

// 메모이제이션된 컴포넌트
const MemoizedUserProfile = memoize((user) => {
  return h('div', { class: 'user-profile' }, [
    h('img', { src: user.avatar, alt: user.name }),
    h('h3', {}, user.name),
    h('p', {}, user.bio)
  ]);
});

// 사용 예시
function renderUserList(users) {
  return h('div', { class: 'user-list' },
    users.map(user => MemoizedUserProfile(user))
  );
}
    

이 기법은 React의 React.memo()나 Vue의 computed 속성과 유사한 개념이야. 입력이 변경되지 않으면 이전에 계산된 결과를 재사용해서 성능을 크게 향상시킬 수 있지! 🧮

3. 지연 렌더링(Lazy Rendering) 구현하기

화면에 보이지 않는 요소는 렌더링을 지연시켜 초기 로딩 성능을 개선할 수 있어:

// 지연 렌더링 컴포넌트
function LazyComponent(renderFn, loadCondition) {
  let rendered = null;
  
  return function() {
    // 로딩 조건이 충족되면 실제 컴포넌트 렌더링
    if (loadCondition()) {
      if (!rendered) {
        rendered = renderFn();
      }
      return rendered;
    }
    
    // 로딩 조건이 충족되지 않으면 플레이스홀더 반환
    return h('div', { class: 'lazy-placeholder' }, 'Loading...');
  };
}

// 사용 예시: 뷰포트에 들어왔을 때만 렌더링
const HeavyComponent = LazyComponent(
  () => h('div', {}, [
    // 복잡한 컴포넌트 내용
    h('h2', {}, '복잡한 차트'),
    // ... 많은 데이터를 표시하는 컴포넌트
  ]),
  () => {
    // 요소가 뷰포트에 있는지 확인하는 로직
    const element = document.querySelector('.lazy-placeholder');
    if (!element) return false;
    
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= window.innerHeight &&
      rect.right <= window.innerWidth
    );
  }
);
    

이 패턴은 무한 스크롤이나 대규모 데이터 표시에 매우 유용해. 사용자가 볼 수 없는 콘텐츠는 렌더링하지 않아 초기 로딩 시간과 메모리 사용량을 크게 줄일 수 있지! 📜

4. 배치 업데이트(Batch Updates) 구현하기

여러 상태 변경을 한 번에 처리해 불필요한 렌더링을 방지할 수 있어:

// 배치 업데이트 관리자
const BatchUpdateManager = {
  updates: [],
  scheduled: false,
  
  // 업데이트 예약
  schedule(updateFn) {
    this.updates.push(updateFn);
    
    if (!this.scheduled) {
      this.scheduled = true;
      
      // 다음 프레임에 일괄 처리
      requestAnimationFrame(() => {
        this.processUpdates();
      });
    }
  },
  
  // 예약된 모든 업데이트 처리
  processUpdates() {
    const updates = this.updates;
    this.updates = [];
    this.scheduled = false;
    
    // 모든 상태 업데이트 적용
    updates.forEach(update => update());
    
    // 한 번만 렌더링
    renderApp(count);
  }
};

// 사용 예시
function incrementCount() {
  BatchUpdateManager.schedule(() => {
    count++;
  });
}

function decrementCount() {
  BatchUpdateManager.schedule(() => {
    count--;
  });
}

// 여러 업데이트를 동시에 적용
function resetAndDouble() {
  BatchUpdateManager.schedule(() => {
    count = 0;
  });
  
  BatchUpdateManager.schedule(() => {
    count = count * 2;
  });
  
  // 두 업데이트가 한 번의 렌더링으로 처리됨
}
    

이 기법은 React의 상태 업데이트 배치 처리와 유사해. 여러 상태 변경을 한 번의 렌더링 사이클로 처리해서 성능을 크게 향상시킬 수 있어! 📊