[Vue] 에러 Property or method "blahblah" is not defined on the instance but referenced during render 알아보자

최근에 Property or method "blahblah" is not defined on the instance but referenced during render 에러를 몇 번 마주쳐서 삽질을 했던 경험이 있다. 물론 문자 그대로 template에 쓰인 변수/함수/속성인데, undefined일 때 나오는 에러이다. 본인이 겪었던 몇 가지 경우를 아래에 정리하고, 본인의 케이스인지 확인해보면 좋을 듯하다.

1. 선언 후 초기화하지 않았을 경우

자바스크립트를 사용할 경우 let myVar;만 해두고 값을 넣지 않은 경우, 타입스크립트를 사용할 경우에는 타입 체킹으로 이런 실수를 할 위험이 현저하게 줄지만 let myVar: string | undefined; 이후에 값을 넣지 않는 경우가 종종 발생한다(ex. vue-class-component 형식에서 required props를 사용할 경우).

2. API 호출로 가져온 데이터가 반영되지 않았을 경우

1번에서의 초기화하지 않은 경우와 비슷한데, API 호출로 가져온 데이터가 반영되지 않은 경우이다. key를 넣지 않았을 때 등은 이 에러가 나지 않고 빈 객체가 들어가기도 한다. 자세한 내용은 key 사용하여 렌더링하기 참고!

여기서 간략하게만 쓰자면 해당하는 태그(주로 컴포넌트나 v-for)에 key를 할당하면 된다. 일반적인 태그에는 v-model만 사용해도 반응형으로 들어가니 자식 컴포넌트 혹은 v-for인 경우 key를 지정해 주었는지 확인해 보자.

3. 오타!!!

사실 이 글을 쓰게된 이유(?)이기도 하다. 초반에 1, 2번으로 애를 먹었다보니, 데이터와 렌더링 관련하여 오류가 발생하면 으레 1, 2번의 이유로 생각했는데 최근에는 오타로 인해 몇 번 발생해서 엉뚱한 곳에서 삽질을 했다. (menu를 Menu로 쓴다거나, alarm을 alram으로 쓴다거나..)

v-model이나 더블 중괄호 {}} 안이나 key 등 template 내에서 사용한 변수와, 자바스크립트에서 선언/정의하여 다루는 변수의 이름이 혹여나 다르지는 않은지 체크해 보자.