Vue.js 주니어 코딩 면접

.prevent는 event.preventDefault()를 호출하여 기본 동작을 막습니다(예: form submit 방지). .stop은 event.stopPropagation()을 호출하여 이벤트 버블링을 중단합니다. .once는 이벤트 리스너가 한 번만 실행되도록 합니다. 이벤트 수식어는 체이닝이 가능하며 @click.stop.prevent처럼 여러 개를 함께 사용할 수 있습니다. 이를 통해 이벤트 핸들러 함수 내부에서 별도의 처리 없이 선언적으로 이벤트를 제어할 수 있습니다.

v-bind 없이 객체를 직접 전달하면 여러 속성을 한 번에 바인딩할 수 있습니다(예: v-bind='objectOfAttrs'). class 바인딩에서 객체 문법은 조건부 클래스 적용에 유리하며(:class='{active: isActive}'), 배열 문법은 여러 클래스를 동적으로 조합할 때 사용합니다(:class='[baseClass, activeClass]'). style 바인딩도 동일하게 객체 문법은 여러 스타일 속성을 한 번에 정의할 때, 배열 문법은 여러 스타일 객체를 병합할 때 사용합니다. 객체와 배열 문법을 혼합해서 사용할 수도 있습니다.

provide/inject는 부모 컴포넌트가 모든 하위 컴포넌트에게 데이터를 제공할 수 있는 의존성 주입 패턴입니다. 중간 컴포넌트들이 props를 전달만 하는 props drilling 문제를 해결하여, 깊이 중첩된 컴포넌트에 직접 데이터를 전달할 수 있습니다. 기본적으로 provide/inject는 반응성이 없지만, Vue 3에서는 ref나 reactive로 감싼 값을 provide하면 반응성이 유지됩니다. 전역 상태 관리가 필요 없는 중소규모 컴포넌트 트리에서 유용하지만, 남용하면 데이터 흐름 추적이 어려워질 수 있습니다.

watch는 명시적으로 감시할 데이터 소스를 지정해야 하고, 이전 값과 새 값을 모두 받을 수 있습니다. watchEffect는 콜백 함수 내부에서 사용된 반응형 데이터를 자동으로 추적하여 의존성을 수집합니다. watchEffect는 컴포넌트 마운트 시점에 즉시 실행되며, 내부에서 접근한 반응형 속성이 변경될 때마다 재실행됩니다. 특정 데이터의 변화만 감시하고 이전 값이 필요한 경우 watch를, 여러 반응형 데이터를 사용하는 부수 효과(side effect)를 자동으로 동기화하려면 watchEffect를 사용합니다.

v-once는 엘리먼트와 컴포넌트를 한 번만 렌더링하고 이후 업데이트를 건너뛰어 정적 콘텐츠 최적화에 사용됩니다. v-memo는 Vue 3.2에서 도입된 디렉티브로, 의존성 배열을 받아 배열 값이 변경되지 않으면 해당 서브트리의 재렌더링을 건너뜁니다. v-once는 초기화 후 절대 변하지 않는 콘텐츠(로고, 정적 텍스트)에 사용하고, v-memo는 v-for와 함께 사용하여 특정 조건에서만 리스트 아이템을 업데이트하도록 제어할 수 있습니다. 두 디렉티브 모두 Virtual DOM 비교 연산을 줄여 렌더링 성능을 향상시킵니다.