Vue.js 미드레벨 프레임워크 심화 면접

Block Tree는 Vue 3 컴파일러가 템플릿을 분석하여 동적 노드들을 평탄화된 배열로 추적하는 최적화 기법입니다. 전통적인 VNode 트리 순회 대신 Block 단위로 동적 노드만 수집하여 diff 알고리즘의 복잡도를 O(n)에서 O(동적 노드 수)로 줄입니다. Fragment는 여러 루트 노드를 가진 컴포넌트에서 Block으로 작동하며, v-for와 v-if가 함께 사용되면 각 반복 아이템이 개별 Block을 형성하여 조건부 렌더링 시에도 효율적인 업데이트가 가능합니다. 이를 통해 대규모 리스트 렌더링에서 불필요한 노드 비교를 크게 줄일 수 있습니다.

effectScope는 반응형 이펙트들을 그룹으로 묶어 생명주기를 함께 관리할 수 있는 API입니다. 일반적으로 컴포넌트의 setup 함수 내에서 생성된 watch, computed는 컴포넌트 인스턴스의 scope에 자동으로 수집되어 unmount 시 정리되지만, 컴포넌트 외부에서 생성된 이펙트는 수동 관리가 필요합니다. effectScope()로 스코프를 생성하고 scope.run() 내부에서 이펙트를 생성하면 해당 스코프에 수집되며, scope.stop()을 호출하면 모든 이펙트가 한 번에 정리됩니다. 이는 플러그인 시스템이나 독립적인 상태 관리 모듈에서 메모리 누수를 방지하는 데 유용합니다.

track 함수는 반응형 데이터에 접근할 때 현재 활성화된 이펙트(activeEffect)를 의존성으로 등록하는 역할을 하며, trigger 함수는 데이터 변경 시 등록된 모든 이펙트를 실행합니다. computed는 내부적으로 ReactiveEffect 인스턴스를 생성하되 lazy 플래그를 true로 설정하여 즉시 실행하지 않습니다. computed 값에 처음 접근할 때만 이펙트가 실행되고 결과가 캐싱되며, dirty 플래그로 의존성 변경 여부를 추적합니다. 의존성이 변경되면 trigger에 의해 dirty가 true로 설정되지만 즉시 재계산하지 않고, 다음 접근 시점에 재계산하여 불필요한 연산을 방지합니다.

defineExpose는 script setup 문법에서 명시적으로 노출할 속성과 메서드를 선언하는 API로, 기본적으로 모든 것이 비공개인 script setup의 캡슐화를 유지하면서 필요한 인터페이스만 공개합니다. 부모 컴포넌트는 ref를 통해 자식 인스턴스에 접근하여 노출된 메서드를 호출할 수 있습니다. 이는 명령형 프로그래밍 방식이므로 선언형 패턴보다 결합도가 높지만, focus(), scrollTo() 같은 DOM 조작이나 폼 초기화 같은 명령형 작업에 적합합니다. 단방향 데이터 흐름 원칙을 유지하려면 상태 변경은 여전히 props/emit을 통해 하고, defineExpose는 읽기 전용 정보 조회나 부수효과가 있는 액션 실행에만 사용해야 합니다.

Vue의 Transition 컴포넌트는 엘리먼트가 삽입/제거될 때 transitionend와 animationend 이벤트를 리스닝하여 CSS 애니메이션의 완료 시점을 자동으로 감지합니다. v-enter-from, v-enter-active, v-enter-to 같은 클래스를 단계적으로 추가/제거하며, getComputedStyle로 transition-duration과 animation-duration을 읽어 더 긴 시간을 기준으로 타이밍을 결정합니다. JavaScript 훅(@before-enter, @enter, @after-enter 등)을 사용할 때는 done 콜백을 명시적으로 호출해야 트랜지션 완료를 알릴 수 있으며, CSS와 함께 사용할 경우 :css='false' 속성으로 CSS 감지를 비활성화하여 불필요한 이벤트 리스닝을 방지해야 합니다.