반응형 Props 구조 분해

Vue의 반응성 시스템에서는 속성에 접근할 때마다 그 속성을 사용하고 있다는 걸 Vue가 자동으로 감지합니다. 예를 들어, computed 속성이나 watcher에서 props.foo에 접근하면, Vue는 foo라는 prop이 해당 computed나 watcher에서 사용되고 있다는 사실을 추적합니다.

이를 통해 foo가 변경될 때마다 Vue가 자동으로 해당 computed나 watcher를 다시 실행해 최신 상태를 반영하게 됩니다.

다음과 같은 코드가 있다고 가정해 봅시다:

const { foo } = defineProps(['foo'])

watchEffect(() => {
  // 3.5 이전에는 한 번만 실행됨
  // 3.5+에서는 "foo" prop이 변경될 때마다 다시 실행됨
  console.log(foo)
})

3.4 이하 버전에서는 foo가 실제 상수로 처리되어 변경되지 않습니다. 그러나 3.5 이상에서는, Vue의 컴파일러가 같은 <script setup> 블록 내에서 defineProps로부터 구조 분해된 변수를 접근할 때 자동으로 props.를 추가합니다. 따라서 위 코드는 다음과 동일하게 변환됩니다:

const props = defineProps(['foo'])

watchEffect(() => {
  // **컴파일러가 `foo`를 `props.foo`로 변환**
  console.log(props.foo)
})

또한 JavaScript의 기본 값 구문을 사용하여 props의 기본 값을 선언할 수 있습니다. 특히 타입 기반의 props 선언 시 유용합니다:

const { foo = 'hello' } = defineProps<{ foo?: string }>()

IDE에서 구조 분해된 props와 일반 변수를 시각적으로 더 구분하고 싶다면, Vue의 VSCode 확장 설정에서 구조 분해된 props에 대한 인레이 힌트를 활성화할 수 있습니다.

실습: TodoStats UI

실습: TodoStats 동작

함수에 구조 분해된 Props 전달

구조 분해된 prop을 함수에 전달할 때, 예를 들어 다음과 같은 코드가 있다고 가정해봅시다: