[Vue3] [Vue warn]: Missing required prop: "list" 해결법

하루 종일 고민했는데, 기본적인 Vue 라이프사이클을 이해하면 해결할 수 있는 문제였다.

 

부모는 bookingListPage, 자식은 bookingList 컴포넌트 구조인 상태에서, bookingListPage에서 데이터 요청을 하고 bookingList로 props를 넘겨주는 방식이다. 파일 구조는 대충 이런 식이다.

 

store
ㄴ BookingListStore.ts
ㄴ index.ts

component
ㄴ BookingList.vue
ㄴ BookingEmptyState.vue

views
ㄴ BookingListPage.vue

 

먼저 BookingListStore.ts 에 bookingList 등의 state가 있고, 백엔드에 리스트를 요청하여 state를 변경해주는 actions가 있다. 

 

const BookingListStore = {
	state: (): StateI => ({
    	list: [],
        ...
    }),
    mutations: {
    	setState: setState,
        ...
    },
    actions: {
    	async getList(
        	context: ActionContext<StateI, StateI>,
            {status, size, page}: PayloadI,
        ): Promise<void> {
        	try {
            	const response = await ...
                
                context.commit('setState', {
                	list: response.data.result.list,
                    ...
                })
            } catch (e) {
            	console.log(e)
            	alert('내역을 가져올 수 없습니다.')
            } finally {
            	...
            }
        }
    }

}

 

이 actions를  BookingListPage의 mounted 시점에 호출하기로 했다.

 

computed: {
	...mapState('bookingListStore', ['list'])
},
methods: {
        ...mapActions('bookingListStore', ['getList']),
        ...
},
async mounted() {
	await this.getList({
    	// payload
    })
    ...
}

 

mounted 시점에 actions 를 호출하고 나서, actions에서는 list라는 state에 값을 넣어줄 것이므로, bookingList props로 list를 내려 주었다. 

 

  <booking-list 
    :list="list"
  /><booking-list />

 

이 시점에서 제목과 같은 warning이 발생했다. [Vue warn]: Missing required prop: "list" 라면서, bookingList에는 props로 list가 필수로 있어야 하는데 list 로 값이 안 들어온다는 것이다. actions 함수 호출도 문제없게 하고, props 넘겨주는 방법에도 문제가 없었는데 이런 일이 발생한 이유가 무엇일까 몇 시간이나 고민했다.

 

답은 fetch한 값을 직접적으로 컴포넌트 또는 페이지에서 받아서 내부 state에 저장해주면 해결이 되는 문제점이었다. mounted에서 actions를 호출한다고 해서, 그 actions 내부에서 commit 한 state 값이 컴포넌트들이 mounted 되는 시점에 준비된 상태는 아니다. 

 

그렇게 돌아돌아 리스트를 받는 대신, mounted에서 actions를 호출하는 게 아니라 직접 서버에 요청하는 메서드를 호출하여 그 result를 내부 state(vue3 에서는 setup)에 넣어주게 되면 이 문제는 해결이 된다.

 

setup() {
	const bookingList = ref([]) as Ref<RentCarBookingListItemI[]>;

	return {
    	bookingList,
    }
},
...
async mounted() {
	try {
    	if (this.isFetching) return;
    	const result = await this.fetchList();
        this.bookingList = result.list;
    } catch (e) {
    	console.log(e);
    } finally {
    	this.isFetching = false;
    }
	
}

 

이렇게 컴포넌트 또는 페이지 내부에서 함수를 호출하고, 그 값을 직접 해당 내부의 state에 넣어주면 문제 없이 작동함을 확인할 수 있다.