[팀] 겸상 - v-if를 이용해 비동기 방식으로 처리되는 데이터를 자식 컴포넌트로 보내기

 

[그림 1] 식사매너 별점이 3점으로 제대로 표시되었다.

 

카카오 로그인 API 연동이 완료되었고 카카오 아이디로 로그인하면 [그림 1]과 같은 프로필 정보를 볼 수 있다. 지금 보고 있는 [그림 1]은 식사 매너 별점이 실제 서버에 저장된 점수와 동일하게 잘 표현된 경우이다. 당연히 이렇게 렌더링 되어야 맞는데 처음부터 그렇지는 않았다. 대수롭지 않은 이 화면은 수많은 삽질의 산물이다.

[그림 1]은 서버로부터 로그인한 사용자 정보를 비동기 방식으로 가져와서 렌더링 한다. 별점 표시 기능은 재사용 컴포넌트로 만들어 import 하였다. 문제는 자식 컴포넌트인 별점 표시 기능에 props로 데이터를 보내는 시점이 비동기 처리가 완료되는 시점보다 빨라 자식 컴포넌트에서 받는 데이터의 값은 내 점수인 3이 아니라 undefined라는 것이다.

이러한 문제는 의외로 쉽게 해결이 가능했다. 해당 데이터의 값이 undefined가 아닐 때에만 자식 컴포넌트로 보내면 되기 때문이다. 따라서 자식 컴포넌트로 보내는 태그에 다음과 같이 v-if를 추가하면 된다.

<stars-rating
    v-if="user.dining_score !== undefined"
    :config="config"
/>

 

이 문제를 해결함에 있어 참고한 내용은 다음과 같다.

https://inma.tistory.com/106

[Vue.js] ajax 요청 후 child component에 props 값을 전달하는 방법