[Vue.js] Error in render: “TypeError: Cannot read property ‘0’ of undefined”

선언한 0을 읽지 못 하는 오류

 

작업 중 또 다시 문제가 발생하였다.
 
이번에 발생한 문제는 [렌더 중 오류 :"TypeError : 정의되지 않은 속성 '0'을 읽을 수 없습니다.]라는 오류로
선언했던 0을 랜더했을 때, 읽을 수 없다는 오류다.
 

 
사실 로직은 별문제가 없으며, 실행도 잘되지만
console에서는 빨간색으로 엄청난 오류를 뿜어낸다.
 
데이터에 배열을 넣고, 그 배열을 사용하기 위해 [0]을 자주 사용하는 편인데,
그럴 때마다 단골손님 처럼 발생하는 오류
 
일단 해당 오류가 왜 일어나는지에 대해 이해해 보자

---

왜 읽지 못 하는 걸까?

 
 

먼저 코드를 확인해 보자
 

해당 로직대로 서버를 실행하면, 로직 자체는 정상적으로 실행이 된다.
하지만 [Vue warn]는 console에는 오류가 뜬다.
 

그 이유는 "vuex의 상태 관리로드 데이터, 비동기 호출 디스플레이, 그리고 vue 렌더링 메커니즘" 때문이다.
vue는 비동기 데이터는 먼저 초기 데이터를 표시한 다음 데이터와 함께 데이터를 표시한다. 

 
따라서 정보를 불러올 때는 여전히 빈 데이터로 들어오고,
랜더링이 된 후에야 데이터가 표시된다.
 
이러한 이유로
해당 오류는 너무나도 당연하게 뜨는 오류인 것이다.

---

오류를 해결해 보자!

 

 
그렇다면 해당 오류를 해결하려면 어떻게 해야할까?
오류를 해결할 수 있는 방법은 여러가지이지만, 원리는 비슷하다.

 

불러오는 값이 들어와 있는지, 아닌지를 먼저 확인하는 것이다.

 

방법 1. v-if를 이용하여 해당 값이 있는지 확인

<template v-if="eventData != null">
    <template v-if="eventData.EVENT_IMAGE != null || eventData.EVENT_IMAGE != ''">
        <img :src="eventData.EVENT_IMAGE" alt="출석체크 연속 30일 달성하면 통합 모바일 문화상품권을 드립니다!">
    </template>
</template>

 
매우 간단한 방법이다.
 
해당 데이터가 랜더링 된 후, 보여지게 하기 위해 v-if를 이용하는 것이다.
해당 데이터를 v-if에 넣게되면 너무나도 깔끔하게 오류가 사라진다.
 

 
해당 방법을 이용하면 깨끗해진 console창을 확인할 수 있다!

 
 
 

출처
https://hj-tilblog.tistory.com/61