[Vue3] watcher로 데이터 감시

1️⃣ 기본 개념

• 입력 데이터 처리:
  • <input>에 입력한 데이터는 무조건 문자입니다.
    • 예를 들어, 숫자 123을 입력해도 '123'으로 저장됩니다.
  • 만약 이를 숫자형으로 변환하고 싶다면 v-model.number="데이터이름"을 사용합니다.
• 문자 입력 제한:
  • 하지만 'abc'와 같은 문자를 막을 순 없습니다.
  • 이를 제어하기 위해 watcher를 활용합니다.

---

2️⃣ Watcher란?

• Watcher는 특정 데이터가 변경될 때마다 실행되는 코드를 작성할 수 있는 기능입니다.
• Vue에서는 watch 옵션(또는 Composition API의 watch 함수)을 사용해 특정 데이터를 감시합니다.
• 감시자는 데이터의 이름(혹은 ref 변수)을 기준으로 작성하며,첫 번째 인자는 변경될 값, 두 번째 인자는 이전 값을 의미합니다.
  (두 개의 파라미터 모두 사용 가능)

---

3️⃣ Vue3 <script setup>에서의 Watcher 사용 예제

예제 1: 기본 watcher 설정

원래 Vue2 코드:

export default {
  data(){
    return {
      month : 1
    }
  },
  watch : {
    month(){
      // month가 변경될 때 실행할 코드
    }
  }
}

Vue3 <script setup>으로 리팩토링:

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

const month = ref(1)

watch(month, (newVal, oldVal) => {
  // month가 변경될 때 실행할 코드
})
</script>

---

예제 2: month 값이 12보다 클 때 경고문 띄우기

원래 Vue2 코드:

export default {
  data(){
    return {
      month : 1
    }
  },
  watch : {
    month(a){
      if (a > 12) {
         alert('13이상 입력하지마')
      }
    }
  }
}

Vue3 <script setup>으로 리팩토링:

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

const month = ref(1)

watch(month, (newVal, oldVal) => {
  if (newVal > 12) {
    alert('13이상 입력하지마')
  }
})
</script>

---

4️⃣ Watcher 활용 시 추가 팁

• 데이터 감시:
  • watch 옵션이나 함수에 감시할 데이터를 인자로 넣어주면, 해당 데이터가 변경될 때마다 등록한 콜백 함수가 실행됩니다.
• 파라미터 사용:
  • 콜백 함수 내 첫 번째 파라미터는 변경된 새로운 값이며,
  • 두 번째 파라미터(선택사항)는 이전 값입니다.
• 적용 사례:
  • 이메일 형식, 숫자/문자 입력 여부, 비밀번호 내 대문자 포함 여부 등
  • 이러한 검증 작업은 정규식을 활용하거나, 경우에 따라 Vue용 form validation 라이브러리를 사용하는 방법도 있습니다.