[Vue] 자식컴포넌트의 Data 값을 부모 컴포넌트에서 마운트 전 사용 시 에러 해결방법

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'example')

콘솔에서 위와 같이 부모컴포넌트에서 자식컴포넌트의 'example'이라는 데이터를 참조하여 초기 렌더링 시에 발생하는 문제를 해결하는 방법이다.

 

문제의 코드는 아래와 같다. computed를 이용해서 refs로 example이라는 데이터에 접근을 했더니 위와 같은 문제가 생긴 것이다.

// 부모 컴포넌트
<template>
  <h1> {{ example }} </h1>
  <Child ref="child"/>
</template>

<script>
import Child from '@/child'
export default {
  computed: {
    example () {
      return this.$refs.child.example || '대체문자'
    }
  },
}
</script>

// 자식 컴포넌트
<template>
  <h1> 자식 </h1>
</template>

<script>
export default {
  data() {
    example: '예시 데이터'
  },
}
</script>

 

코드를 아래와 같이 고쳐주자.

computed: {
    example () {
      return this.$refs.child?.example || '대체 문자'
    }
},

해결방법은 옵셔널 체이닝을 사용해서 초기 렌더링 시 child라는 컴포넌트가 없을 경우 example을 참조하지 않게 해준다.

 

참고

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'

 

자 결론을 알았으니 원인을 찾아보자.

원인은 뷰에서 부모 - 자식 컴포넌트 간에 라이프 사이클에 있다.

과정은 아래와 같다.

 

라이플 사이클 참고

https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html

라이프사이클 훅 | Vue.js