96일차

• 상품디테일 페이지 완성(그룹과제)
• 노션클론코딩 복습

새로배운내용

• 한글이중입력제어

if ((event as KeyboardEvent).isComposing) return

• 컴포지션 API의 경우 반응형이 아닌 데이터도 template부분에서 사용을 할 수 있습니다

• ref객체

  • 반응형
  • this.$refs요소참조

• ref vs reactive

  • 반응형데이터를 만들어내는 함수, ref랑 기능은 똑같습니다.
  • 하지만 reactive는 반응형데이터를 만드는 기능밖에 없습니다.
  • ref의 경우 원시형과 참조형 모두 가능합니다.
  • 그런데 reactive는 객체와 배열만 반응형으로만 만들 수 있습니다.
  • reactive의 경우 컴포지션 내부에서 사용되는 경우 .value를 사용하지 않아도 괜찮습니다.

ref

• 반응성을 데이터에 부여합니다.
• 원시형, 참조형 모두에 사용이 가능합니다.
• ref객체는 .value를 붙여서 사용해야합니다.
• 요소 참조를 할 때도 사용을 합니다.
  reactiev
• 반응성을 데이터에 부여합니다
• 원시형은 불가하며 참조형에만 사용이 가능합니다.
• .value를 붙이지 않고 사용을 할 수 있습니다.

• props에서 객체구조분해할당을 하는 경우 반응성이 증발해버립니다.
• 이를 방지하기 위해 쓰는 것이 바로 toRefs입니다.

const $props = defineProps({
  name: {
    type: String,
    required: true
  },
  suffix: {
   	type: String,
    default: '...'
  }
})

const {name, suffix} = toRefs($props)

const name = toRef($props, 'name')
const suffix = toREf($props, 'suffix')