인프런 커뮤니티 질문&답변

fhou4444님의 프로필 이미지
fhou4444

작성한 질문수

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

하이 오더 컴포넌트가 적용된 앱 구조 설명 및 흐름 정리

vue3 에러 메세지...

작성

·

448

1

piniaData.js

import { defineStore } from 'pinia';
import { fetchAskList, fetchJobsList, fetchNewsList, fetchUserInfo, fetchItem, fetchList } from '../api/index';

export const usePiniaStore = defineStore('listData', {
    state: () => {
        return {
            news: [],
            ask: [],
            jobs: [],
            user: {},
            item: {},
            loading: true,
            list: [],
        }
    },
    getters: {
        fetchedNews(state) {
            return state.news
        },
        fetchedAsk(state) {
            return state.ask
        },
        fetchedJobs(state) {
            return state.jobs
        },
        fetchedUser(state) {
            return state.user
        },
        fetchedItem: (state) => state.item,
        fetchedList: (state) => state.list
    },
    actions: {
        async FETCH_NEWS(){
            try {
                this.loading = true;
                const res = await fetchNewsList();

                this.news = res.data;
                return res;
            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_ASK(){
            try {
                this.loading = true;
                const res = await fetchAskList();
                this.ask = res.data;

                return res;
            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_JOBS(){
            try {
                this.loading = true;
                const res = await fetchJobsList();
                this.jobs = res.data;

                return res;
            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_USER(id){
            try {
                this.loading = true;
                const res = await fetchUserInfo(id);
                this.user = res.data;

                return res;
            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_ITEM(id){
            try {
                this.loading = true;
                const res = await fetchItem(id);
                this.item = res.data;

                return res;

            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_LIST(pageName){
            try {
                this.loading = true;
                const res = await fetchList(pageName);
                this.list = res.data;
                return res;

            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
    }
})

 

CreateListView.js

import { h } from 'vue';

import ListView from './ListView';
import { useRoute } from 'vue-router'
import { usePiniaStore } from '../store/piniaData'

export default function createListView(componentName) {
    return {
        name: componentName,
        setup() {
            // store 를 쓰기위함
            const store = usePiniaStore();
            // store에 우리가 만든 state를 사용하고, api요청 함수를 사용하기 위해 
            const { FETCH_LIST } = store;
            const routeName = useRoute().name;

            FETCH_LIST(routeName).
            then(() => {
                console.log('fetched')
            });

            return { routeName }

        },
        render() {
            // ListView 컴포넌트를 렌더링하는 렌더링 함수
            return h(ListView);
        }
    }
}

 

로 작성을 해서 기능은 다 작동하는데요...

콘솔창에
[Vue warn]: Property "name" was accessed during render but is not defined on instance.

at <ListItem>

at <ListView>

at <NewsView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {_pStores: {…}, …} > >

at <BaseTransition appear=false persisted=false mode=undefined ... >

at <Transition name="page" >

at <RouterView>

at <App>

에러가 계속나오는데 어떻게 해결할 수 있는지 알 수 있을까요?

답변 2

0

안녕하세요, 첨부해 주신 에러는 템플릿 표현식에서 name값이 정의되지 않았는데 접근되었다는 의미입니다. 요거 템플릿 표현식쪽 코드를 살펴보셔야 할 것 같아요 :)

0

안녕하세요, 인프런 AI 인턴입니다.

fhou4444님이 경험하고 계신 Vue 경고는, ListItem 컴포넌트 내에서 name 이라는 속성에 접근하려고 시도했지만 해당 속성이 인스턴스에 정의되어 있지 않아 발생한 문제입니다. ListItem 컴포넌트의 코드를 확인하지 못하므로 정확한 지시를 드리긴 어렵지만, 해당 컴포넌트 안에서 name 속성을 정의하거나, 더 이상 사용하지 않는다면 관련 부분을 제거하면 경고 메시지를 해결할 수 있습니다.

예를 들어, 만약 ListItem 컴포넌트에서 props를 통해 name을 받고 있지 않다면, props에서 name을 정의해주거나, ListItem 내부에서 name 속성을 사용하는 부분을 수정해야 합니다.

ListItem 컴포넌트에 propsname을 전달할 수 있는 구조를 갖추었다면, 사용하는 상위 컴포넌트에서 ListItem으로 name 속성을 적절히 전달하고 있는지 확인해보세요.

이런 식으로 문제를 해결해나가시면 됩니다. 추가적인 질문이나 도움이 필요하시면 언제든지 문의해주세요.

fhou4444님의 프로필 이미지
fhou4444

작성한 질문수

질문하기