• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

동적 라우팅과 헬퍼함수 간의 오류 질문드립니다.

23.11.11 16:32 작성 조회수 157

1

안녕하세요. 강사님. 항상 강의 잘 보고 있습니다.

AskView에서 헬퍼함수(mapGetters)를 사용한 것과 같이 NewsView에서도 동일하게 적용해보았습니다.

근데, 이 후 라우팅 파트에서 router-link를 구현할 때 오류가 발생 하더라구요.

원인은 비동기로 가져오는 'fetchedNews' 값이 router-link를 렌더링 하는 시점보다 늦게 응답받기 때문이라고 생각했습니다.

그러던 중 router-link를 다른 방식으로 작성 하였더니 정상동작해서 질문드립니다..

하기 두 방식의 차이점이 무엇인지 잘 모르겠습니다.

더불어, 위와 같이 router-link의 기반데이터를 얻는 비동기 응답의 시간이 지연될 때, router-link의 생성을 같이 늦출 수는 없을까요?..

[1. 오류가 났던 사용 법]

<router-link class="link-text" :to="{ name: 'user', params: { id: item.user } }"> 
  {{ item.user }} 
<router-link>

[2. 수정된 동작한 사용법]

<router-link :to="`user/${item.user}`">{{ item.user }}</router-link>
course-thumbnail

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

답변 2

·

답변을 작성해보세요.

0

장기효(캡틴판교)님의 프로필

장기효(캡틴판교)

지식공유자

2023.11.20

안녕하세요, 아마 1번 코드에서 item.user를 접근할 때 item이 빈 값이면 에러가 발생했을 것 같아요. item에 옵셔널 체이닝 문법을 쓰거나 item 값의 초기 값을 null, undefined가 아닌 빈 객체로 두시는 방법도 유효할 것 같습니다 :)

https://joshua1988.github.io/vue-camp/es6+/optional-chaning.html

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.11.13

안녕하세요 김동현 님,
오류가 발생한 사용 방법과 수정된 사용 방법의 차이점에 대해 설명드리겠습니다.

첫 번째 사용 방법에서는 <router-link>의 to 속성에 객체 형태로 경로와 파라미터를 설정하였습니다. 이 경우, 해당 값을 동적으로 가져오는 fetchedNews 값이 아직 비동기로 응답되지 않은 상태에서 렌더링되기 때문에 오류가 발생할 수 있습니다.

두 번째 사용 방법에서는 <router-link>의 to 속성에 템플릿 리터럴을 사용하여 경로를 문자열로 생성하였습니다. 이 방식은 fetchedNews 값이 비동기로 응답된 이후에 연산되기 때문에 오류가 발생하지 않았을 것입니다.

router-link의 생성을 응답 지연 시간에 맞춰 같이 늦출 수 있는 방법은 없습니다. 하지만 일반적으로 비동기 요청을 처리하고 데이터를 받아온 이후에 router-link를 렌더링하는 방식으로 구현하실 수 있습니다. 이렇게 함으로써 데이터를 받아오는 시간이 지연되더라도 오류 없이 라우터 링크를 생성할 수 있습니다.

그럼에도 불구하고 동적 데이터를 사용하는 라우터 링크의 생성을 미루고자 한다면, v-if 또는 조건부 렌더링을 사용하여 fetchedNews 값이 있는 경우에만 라우터 링크를 렌더링하도록 조건을 처리할 수 있습니다.

이해가 도움이 되셨길 바랍니다. 추가로 궁금한 점이 있으시면 언제든 문의해주세요!

이 글과 비슷한 Q&A