[VueJS] 컴포넌트 props 유효성 검사 중 Object 타입

자식 컴포넌트가 부모 컴포넌트로부터 props를 전달받고 props 유효성 검사로 타입을 지정할 때

다른 타입에서는 못 봤던 것 같은데, Object 타입일 경우에는 기본 값을 반환해줘야 한다.

물론 공식 홈페이지에 나와있기는 하다.

https://kr.vuejs.org/v2/guide/components-props.html#Prop-%EC%9C%A0%ED%9A%A8%EC%84%B1-%EA%B2%80%EC%82%AC

Props — Vue.js

하지만... 마지막으로 본지도 오래됐고, 평소에 잘 안 쓰다 보니... 다른 타입들처럼 작성해서 계속 undefined가 출력되어 삽질하다 뒤늦게 알아낸 김에 블로그에도 작성하기로 했다.

---

(테스트로 작성한 소스입니다.)

부모 컴포넌트

위 소스처럼 부모 컴포넌트에서 Object 형식의 데이터를 자식 컴포넌트에 전달을 했다.

 

따로 props에 대한 유효성 검사(type)를 하지 않고

이렇게 작성하면 잘 되긴 한다.

하지만, 유효성 검사는 넣는 것을 권장하는 것으로 알고 있기에

처음에는 아무생각 없이 데이터가 잘 넘어오는지 확인해보려고

위 코드처럼 작성을 했고, created() 안에 console.log(this.obj);를 찍어보니

undefined가 출력되었다.

 

이때 바로 공홈을 가서 확인을 해봤어야 했는데. 코드 박치기를 시작했다.

주석으로 ok는 정상 출력이 되는 부분이고, undefined는 잘못된 소스이다.

이렇게 한번 겪고 또 까먹을까 봐 블로그에도 작성.