[데브코스/TIL] DAY87 - Vue(3)

🔌 MVVM(Model-View-ViewModel)

• Vue가 사용중인 아키텍처

1. Model

• 애플리케이션의 데이터
• data 객체로 관리
• 변경 시, ViewModel에 통보

2. ViewModel

• Model과 View를 연결하는 중간 역할
• computed , methods , watch 같은 기능을 통해 데이터 처리
• View와 동기화

3. View

• 사용자와 상호작용하는 UI 부분
• v-bind , v-model , v-for , v-if 등의 디렉티브 사용
• ViewModel과 자동 동기화

🔌 이벤트

1. v-on 디렉티브

• 형식 : v-on:이벤트타입="이벤트 핸들러"
• ex) v-on:click="clickHandler"
• 축약 가능 : @click="clickHandler"
• 이벤트 객체 전달 가능 : @click="clickHandler($event)"
• 인자 전달 가능 : @click="clickHandler(10)"
• 이벤트 객체, 인자 함께 전달 가능 : @click="clickHandler($event, 10)"
• 이벤트 핸들러 없이 직접 조작 가능
  • @click="count = count + 1"
  • @input="($event) => (query = $event.target.value)"

이벤트 타입

• click : 클릭 핸들러
• input : 입력 핸들러
• keyup : 키 입력 핸들러

2. methods 옵션

• data 속성을 정의한 것처럼 methods 속성 정의
• methods 내부에 메서드 정의하듯이 이벤트 핸들러 및 함수 정의
• data 접근을 위해서는 this.데이터명으로 접근

3. 수식어

• 리액트에서는 없는 개념으로, 이벤트에 보조적인 기능을 부여해주는 것
• 형식 : v-on:이벤트타입.수식어="이벤트 핸들러"
• 수식어 종류
  • prevent , once , enter 등
  • 굉장히 많음
  • 문서

예시 - once

• 이벤트 핸들러가 딱 한 번만 실행되도록 함
• <button @click.once="decrease">감소</button>
  • 무한으로 클릭해도 오로지 딱 한 번만 실행됨

예시 - prevent

• 이벤트의 기본 동작을 중단시킴
• <a href="http://www.naver.com" @click.prevent>네이버</a>
  • 링크 이동이 안됨

예시 - 입력키

• 특정 입력키를 눌러야 이벤트 발생
• @keyup.enter="handleKeyup"
  • enter를 눌러야 실행
• @keyup.ctrl.enter="handleKeyup"
  • ctrl를 누른 상태에사 enter를 눌러야 실행

예시 - 마우스 버튼

• 지정한 특정 마우스 버튼을 클릭해야 이벤트 핸들러가 실행되도록 함
• 종류 : left, right, middle
• <button @click.right="decrease">감소</button>
  • 오른쪽 마우스 클릭을 해야 decrease 실행
  • 왼쪽 마우스 클릭으로는 반응하지 않음

🔌 메모이제이션

1. v-memo 디렉티브

• 형식 : v-memo="[name]"
• 배열 안에 있는 데이터들 중 하나라도 바뀌어야 변경된 값을 반영

// age나 gender가 바뀌어도 반영되지 않음
// name이 바뀌어야 그동안 반영되지 않았던 다른 변경사항들도 함께 반영
<div v-memo="[name]">
	<h1>{{ name }}</h1>
	<h1>{{ age }}</h1>
	<h1>{{ gender }}</h1>
</div>

🔌 computed

• 데이터를 기반으로 어떠한 가공을 해야할 때 주로 사용 (데이터 가공은 여기서 하는 것을 권장)
• data 속성과 methods 속성을 정의한 것처럼 computed 속성 정의
• computed 내부에 메서드 정의하듯이 속성 정의
• 메서드로 정의하나, 메서드가 아니기 때문에 파라미터 전달 불가능
  • 오로지 데이터로만 가공할 때 사용
• 읽기 전용이므로 메서드 내에서 변경 및 할당 불가
• 재사용할 때, 내부적으로 캐시되어 있는 데이터로 출력됨
  • 참조하고 있는 데이터가 변경되면 캐싱을 풀고 다시 계산 & 캐싱
• 그래도 변경하고 싶다면 getter와 setter로 설정 가능

computed: {
  fullName: {
    get() { ... }
    set(value) { ... }
  }
}

🔌 그외

1. 한글은 조합문자

• 영어와는 다르게 한글은 입력한 글자가 바로 한단계씩 느리게 반영됨
  • 입력 중인 input 태그에는 문제없음
  • input에 입력된 내용을 바로 다른 방식으로 출력할 때 문제
• 그래도 제출할 땐 누락없이 제출됨 (focus out 되면서 마저 반영하고 제출되기 때문)
• 위에 상황 때문에 글자 개수를 제대로 인식하지 못하는 문제 발생
  • v-model를 사용 → v-bind로 value에 넣고 input 이벤트 사용
• 그러나 사용자 입력값을 실시간으로 확인할 필요가 없을 때는 딱히 문제되지 않음

📌 출처

수코딩(https://www.sucoding.kr)