[Vue.js] @change 이벤트와 watch

예시 코드

<template>
    <div class="search-box">
        <!-- type="search" 는 text 대신 시멘틱 의미 부여 -->
        <input             
            type="search" 
            @change="
             $emit('searchMovie', $event.target.value);
             inputText = $event.target.value;
             $event.target.value = '';
            "
            placeholder="검색어 입력"
        >
        <button>검색</button>
    </div>
    <p>{{  inputText }}</p>
</template>

<script>
    export default {
        name: "SearchBarComponent",
        props: {
            data: Array,
        },
        data() {
            return {
                inputText: '',
            }
        },
        watch: { // 반응형 감시
            inputText(name) {
                // 입력한 영화제목이 데이터에 있는지 확인
                const findName = this.data.filter(movie => {
                    return movie.title.includes(name);
                })
                if(findName.length == 0) {
                    alert('해당하는 자료가 없습니다.')
                }
            }
        },
    }
</script>

✅ 1. @change

<input
  type="search"
  @change="..."
>

✔ 의미

• @change는 DOM 이벤트 리스너로, input 요소에서 값이 변경되고 포커스를 잃을 때 발생합니다.

• 즉, 텍스트를 입력하고 나서 Enter를 누르거나, 다른 곳을 클릭(검색 버튼)해서 포커스를 벗어나야 이벤트가 발생합니다.

✔ 현재 코드에서의 역할

@change="
  $emit('searchMovie', $event.target.value);
  inputText = $event.target.value;
  $event.target.value = '';
"

1. 사용자가 검색창에 입력하고 포커스를 벗어나면

2. searchMovie라는 이벤트를 발생시켜 부모 컴포넌트로 검색어를 보냄 ($emit)

3. inputText라는 내부 데이터에 검색어 저장

4. input 창을 비움 ($event.target.value = '')

✅ 2. watch: { inputText() {} }

watch: {
  inputText(name) {
    const findName = this.data.filter(movie => {
      return movie.title.includes(name);
    });
    if (findName.length == 0) {
      alert('해당하는 자료가 없습니다.');
    }
  }
}

✔ 의미

• watch는 Vue의 반응형 감시 기능입니다.

• inputText가 변경될 때마다 자동으로 실행되는 감시자 함수입니다.

✔ 현재 코드에서의 역할

1. inputText가 변경되면

2. this.data에서 제목에 해당 문자가 포함된 영화들을 찾아냄

3. 아무것도 없으면 경고창(alert) 표시

✔ 즉, inputText는 @change 이벤트를 통해 값이 바뀌고, 그걸 watch가 감지합니다.

✅ 흐름 정리

사용자 입력
   ↓
@change 발생 → $emit('searchMovie', 입력값) + inputText = 입력값
   ↓
watch: inputText() 실행됨 → 해당 영화가 있는지 체크

✅ 참고: @change 대신 @input도 가능

• @input은 입력할 때마다 즉시 실행됨

• @change는 입력 후 포커스 벗어날 때 실행됨

<input @input="inputText = $event.target.value">

✅ 요약