코딩공부방

개요

프로젝트 진행 중 vuetify의 VWindowItem 컴포넌트를 사용했었는데, 첫번째 VWindowItem을 로딩할 때 props 전달이 정상적으로 이뤄지지 않는 경우가 있었고, 이를 어떻게 해결했는지 공유하고자 글을 작성합니다

문제점 확인

소스코드의 경우, v-window-item 컴포넌트의 value가 변경되면 표시할 하위 컴포넌트가 변경되는 방식인데 v-window-item의 value에 해당하는 컴포넌트가 최초 1회 실행시에는 데이터를 표시하지 못하는 현상이었습니다.

컨벤션이 조금 다른부분은 양해해주길 바랍니다..

아래의 화면을 보면 문제점이 쉽게 이해가 될 것이다. 최초로 마커를 클릭했을 때 단지 정보를 표시하지 못하고, 이후부터는 정상적으로 동작하는 것을 볼 수 있다.

소스 코드 분석

왜 이러한 문제가 발생했는지 로그를 통해 확인해보자. 먼저 props 값을 전달하는 부분, 컴포넌트가 props를 받는 부분, 하위 컴포넌트가 Mounted 되는 부분에 로그를 남겼고, 결과는 아래와 같았다.

이후 두번째로 마커를 선택하여 다시한번 로그를 확인해봤다. 

이로써 현재 발생하고 있는 문제점은 첫번째로 마커 클릭 이벤트를 보냈을 때, TabTest 컴포넌트에 props가 정상적으로 전달되지 않는다는 점이다. 그렇다면 왜 이러한 문제가 발생하는지 다시 한번 고민해보자.

첫번째 props값이 업데이트 될 때 값이 업데이트 된 이후에 "하위 컴포넌트 Mounted" 로그가 발생했으므로, 컴포넌트가 생성되지 않은 시점에 props가 전달되었을 확률이 높아보인다. 따라서, VWindowItem 컴포넌트와 관련지어 같은 문제가 발생한 경우가 있는지 알아보자.

문제 해결

구글링에 앞서, Vuetify의 VWindowItem 컴포넌트 API 문서를 확인해보니 관련 props가 존재하는걸 확인했다.

또한, 구글링한 문서에서도 eager props를 통해 문제를 해결한 유사 사례를 발견했다.

https://stackoverflow.com/questions/69796214/i-cannot-watch-vuex-state-in-components-within-v-tabs-until-first-visit

따라서, eager props를 설정하고 다시 한번 결과를 확인해보자.

하위 컴포넌트가 Mounted 되는 시점이 위로 올라갔고, 첫번째 호출에서도 props 값을 잘 수신하는것을 볼 수 있다.

Reference

https://vuetifyjs.com/en/api/v-window-item/#links