[TIL 11] Vue 인스턴스, 이벤트 처리

nini·2025년 3월 20일

JavaScript KB KB it's your life TIL node.js vue.js

KB IT's Your Life

목록 보기

11/40

Vue 인스턴스

Vue 인스턴스 개요

애플리케이션 인스턴스
- Vue.createApp()으로 만든 객체
- 전체 컴포넌트 트리는 애플리케이션 인스턴스를 마운트 할 때 렌더링하게 됨

let vm = Vue.createApp({
	name: "App",
	data() {
		return { name: ""};
	},
}).mount("#app");

마운트???????
Vue.js에서 "마운트(mount)"란 애플리케이션 인스턴스를 특정 DOM 요소에 연결하여 렌더링하는 과정을 의미

- 마운트의 개념
Vue 애플리케이션은 초기에는 단순한 JavaScript 객체일 뿐이다. 그런데 mount 과정이 실행되면, Vue가 실제 DOM과 연결되면서 화면에 컴포넌트가 렌더링된다.
즉, Vue의 가상 DOM(Virtual DOM)이 실제 HTML DOM과 결합하는 순간이라고 보면 된다!

data 옵션

data 옵션
- 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용
  - 관리하고 추적한다? 변경을 탐지하고 추적하여 화면을 갱신!
- 반드시 객체를 리턴하는 함수로 정의
- 리턴 객체가 Proxy로 래핑됨(Vue는 data 객체를 Proxy로 감싸서 변경을 감지함)
- $, _로 시작하는 이름은 Vue에서 특수한 용도(내부 용도)로 사용하고 있음 → 일반 식별자의 시작 문자로 사용하면 안 됨

계산된 속성(Computed Property)

계산된 속성
- HTML(템플릿)에서 출력하기 위한 속성
- data나 다른 속성이 변경될 때 함수가 실행되어 저장된 캐싱된 값
- 함수의 실행은 의존하고 있는 속성 또는 data가 변경될 때 한 번 호출됨
- computed 옵션에 함수를 등록
- 함수명이 계산된 속성명이 됨

계산된 속성 (Computed Property) ?
- 계산된 속성은 의존하는 데이터가 변경될 때마다 자동으로 다시 계산된다.
- 즉, 데이터가 변하지 않으면 캐시된 값을 그대로 사용하여 성능을 최적화한다.
- 계산된 속성은 기본적으로 getter(읽기)와 setter(쓰기) 메서드를 가질 수 있다.
- React의 useMemo 와 동일한 역활이다.

Vue.js에서 계산된 속성은 템플릿에서 값을 출력할 때 사용되는 캐싱되는 속성이다. 기본적으로 data 속성이나 다른 속성을 기반으로 자동으로 값을 계산하고, 의존하는 값이 변경될 때만 다시 계산된다!

❌ 템플릿에서 직접 처리하는 경우 (비효율적!)
매 렌더링마다 동일한 연산을 반복하게 되어서 비효율적

<template>
  <p>{{ message.split('').reverse().join('') }}</p>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('Hello Vue!');
</script>

✅ 계산된 속성을 사용하는 경우 (효율적!)

<template>
  <p>{{ reversedMessage }}</p>
</template>

<script setup>
import { ref, computed } from 'vue';

const message = ref('Hello Vue!');

const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('');
});
</script>

computed()를 사용하면 message 값이 바뀔 때만 reversedMessage가 다시 계산됨
Vue가 내부적으로 캐싱을 해줘서, 필요할 때만 함수를 실행함

메서드

메서드 옵션
- Vue 인스턴스에서 사용할 메서드를 등록하는 옵션
- 인스턴스에서 직접 호출하거나, 디렉티브의 표현식, {{}}의 표현식에서 호출 가능
- 이벤트 핸들러로 이용가능

<template>
  <p>계산된 속성: {{ computedNumber }}</p>
  <p>메서드: {{ methodNumber() }}</p>
</template>

<script setup>
import { ref, computed } from 'vue';

const number = ref(10);

// computed 사용
const computedNumber = computed(() => {
  console.log('Computed 실행됨!');
  return number.value * 2;
});

// method 사용
const methodNumber = () => {
  console.log('Method 실행됨!');
  return number.value * 2;
};
</script>
✅ computedNumber는 number가 바뀔 때만 다시 계산됨.
❌ methodNumber()는 매번 호출될 때마다 실행됨 → 불필요한 연산 발생 가능.

즉, 같은 값을 여러 번 계산해야 한다면 computed가 적절하고, 매번 새 값을 계산해야 한다면 methods가 적절하다.

관찰 속성

관찰 속성(Watched Property)

JS 코드에서 데이터가 변경된 경우
- 이를 감지하여 다른 JS 코드를 실행하고자 하는 경우
- 주로 긴 처리 시간이 필요한 비동기 처리에 적합

watch 옵션 객체로 정의

함수로 정의
data 속성명과 동일하게 함수명 정의
매개변수
- 첫 번째 인자: 변경 후의 값
- 두 번째 인자: 변경 전의 값

watch: {
	x(current, old) { // return은 없다
		console.log(`## x : ${old} --> ${current}`);
		var result = Number(current) + Number(this.y);
		if (isNaN(result)) this.sum = 0;
		else this.sum = result;
	},
	y(current, old) {
		console.log(`## y : ${old} --> ${current}`);
		var result = Number(this.x) + Number(current);
		if (isNaN(result)) this.sum = 0;
		else this.sum = result;
	},
},

watch ?
- watch는 주로 데이터의 변화를 감지하고 특별한 처리가 필요할 때 유용하다.
- 데이터의 변화를 감지하고 화면은 변하지 않으면서 비즈니스 로직의 변수 값만 바꾸고 싶을 때 사용
위의 코드에서 watch를 사용하면 x와 y 값이 변할 때마다 덧셈 결과를 계산해서 sum에 반영하게 된다.

watch / computed 차이점
watch는 x나 y의 값이 변할 때마다 계산을 직접 해주어야 한다.
computed는 x와 y 값이 바뀔 때마다 sum이 자동으로 다시 계산해서 업데이트 된다.

✅ 특정 데이터(`data`, `ref`)가 변경될 때 실행하는 메서드를 정의하는 옵션

✅ `computed`는 값을 반환하지만, `watch`는 값을 감지하고 실행

✅ 비동기 처리(API 호출, 타이머, 파일 저장 등)에 적합

✅ 객체 내부 속성 감지시 `{ deep: true }` 옵션 사용

✅ 초기 실행 필요할 경우 `{ immediate: true }`옵션 사용

computed와 달리, watch는 값을 반환하는 것이 아니라, 특정 동작을 실행한다는 점이 가장 큰 차이점!

생명주기 메서드

.......@@

이벤트 처리

인라인 이벤트 처리

인라인 이벤트
- v-on 디렉티브로 설정
- 형식 v-on:[이벤트 이름]="표현식
- 단축 표현 @[이벤트 이름]="표현식"
- 이벤트 객체가 필요한 경우 @click="test($event)"

이벤트 핸들러 메서드

Vue 인스턴스의 methods 속성에 정의한 함수를 이벤트 처리 함수로 연결

이벤트 객체

이벤트 객체
- 주요 공통 속성
- 키코드 이벤트 관련 속성
- 마우스 이벤트 관련 속성
- 이벤트 객체의 주요 메서드

기본 이벤트

기본 이벤트(Default Event)
- HTML 문서나 요소에 어떤 기능을 실행하도록 이미 정의되어 있는 이벤트
- 대표적인 기본 이벤트 - <a>, 브라우저 화면에서 마우스 오른쪽 클릭 → 컨텍스트 메뉴 출력, <form> 요소 내부의 submit 버튼 클릭 → 서버로 전송
- 기본 이벤트의 실행 막기 event.preventDefault()

수식어를 통한 기본 이벤트 차단

@이벤트.prevent → 해당 이벤트를 차단, event.preventDefault() 호출 효과

<div @contextmenu.prevent
	style="position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px">
	<a href="https://facebook.com" @click="confirmFB">페이스북</a>
</div>

이벤트 전파와 버블링

이벤트 전파의 3단계
버블링의 차단 event.stopPropagation() 호출
관련 수식어
- .stop 이벤트 전파 중단, event.stopPropagation() 호출과 동일
- .capture CAPTURING_PHASE 단계에서만 이벤트 발생
- .self RASING_PHASE 단계일 때만 이벤트 발생

1. 이벤트 전파 (Event Propagation)
이벤트 전파는 이벤트가 DOM 트리에서 어떻게 흐르는지에 대한 전체적인 과정이다.
이벤트는 DOM 요소에서 발생한 후 부모 요소나 자식 요소로 "전파" 된다.
전파 방식에는 두 가지가 있다.
① 버블링 (Bubbling): 자식 요소에서 발생한 이벤트가 부모 요소로 전파된다.
                    : 일반적이다.
② 캡처링 (Capturing): 부모 요소에서 발생한 이벤트가 자식 요소로 전파된다.
2. 이벤트 버블링 (Event Bubbling)
버블링은 이벤트가 가장 안쪽의 요소에서 바깥쪽 요소로 전파되는 방식이다.
즉, 이벤트가 자식 요소에서 발생하면 그 이벤트는 부모 요소로 "버블링"되어 올라가게 된다.

웹에서 이벤트가 발생하면, 해당 이벤트는 특정 요소에서만 작동하는 게 아니라, DOM 트리를 따라 이동하면서 다른 요소에도 영향을 줄 수 있다!

이 과정을 이벤트 전파(Event Propagation)라고 하고, 크게

3단계로 나뉜다.

✅ 이벤트 전파 3단계

캡처링 단계: window → document → 부모 → 자식 방향
타깃 단계: 이벤트가 실제 타깃 요소에서 실행됨
버블링 단계: 자식 → 부모 → document → window 방향

✅ 이벤트 전파를 제어하는 방법

event.stopPropagation() → 이벤트 전파(캡처링/버블링) 중단
event.preventDefault() → 기본 동작(링크 이동 등) 중단

이벤트 수식어

once 수식어
- 모든 이벤트에 연결 가능
- 한 번만 이벤트를 발생시키고 이벤트 연결을 해제
키코드 관련 이벤트 수식어
- 키 관련 수식어
  - up, down, left, right
  - enter, esc
  - space, tab, delete
  - ctrl, alt, shift, meta
- @이벤트.enter="..." 엔터를 쳤을 때 이벤트 핸들러 호출
- @keyup.ctrl.enter="..." CTRL+ENTER 조합 시 이벤트 핸들러 호출
- @keyup.ctrl.c="..." CTRL+C 조합
마우스 관련 수식어
- 수식어
  - left, right, middle: 마우스 버튼
  - 키 관련 수식어 사용 가능
    - @click.left, @click.right, @click.ctrl(Ctrl 키를 누르고 클릭)
exact 수식어
- 다른 수식어와 조합해 이벤트를 등록할 때 → 정확하게 일치하는 조합으로 이벤트가 일어나야 핸들러가 실행되도록 설정
```
<button @click.ctrl.exact="onlyCtrlClick">Ctrl만 눌렸을 때</button>
-> 만약 Ctrl + Shift를 같이 누르면 실행되지 않음!
```
- 언제 사용?
  - Ctrl만 눌렀을 때만 특정 기능을 실행하고 싶을 때
  - 여러 키 조합이 있을 때, 정확한 조합이 아니면 실행되지 않도록 제한하고 싶을 때
  - 마우스 이벤트와 키보드 이벤트를 조합하여 정교한 이벤트 처리를 하고 싶을 때