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

Question

안녕하세요. 강사님. 항상 강의 잘 보고 있습니다. AskView에서 헬퍼함수(mapGetters)를 사용한 것과 같이 NewsView에서도 동일하게 적용해보았습니다. 근데, 이 후 라우팅 파트에서 router-link를 구현할 때 오류가 발생 하더라구요. 원인은 비동기로 가져오는 'fetchedNews' 값이 router-link를 렌더링 하는 시점보다 늦게 응답받기 때문이라고 생각했습니다. 그러던 중 router-link를 다른 방식으로 작성 하였더니 정상동작해서 질문드립니다.. 하기 두 방식의 차이점이 무엇인지 잘 모르겠습니다. 더불어, 위와 같이 router-link의 기반데이터를 얻는 비동기 응답의 시간이 지연될 때, router-link의 생성을 같이 늦출 수는 없을까요?.. [1. 오류가 났던 사용 법] {{ item.user }} [2. 수정된 동작한 사용법] {{ item.user }}

captain · Answer

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

communityai8509 · Answer

안녕하세요 김동현 님, 오류가 발생한 사용 방법과 수정된 사용 방법의 차이점에 대해 설명드리겠습니다. 첫 번째 사용 방법에서는 의 to 속성에 객체 형태로 경로와 파라미터를 설정하였습니다. 이 경우, 해당 값을 동적으로 가져오는 fetchedNews 값이 아직 비동기로 응답되지 않은 상태에서 렌더링되기 때문에 오류가 발생할 수 있습니다. 두 번째 사용 방법에서는 의 to 속성에 템플릿 리터럴을 사용하여 경로를 문자열로 생성하였습니다. 이 방식은 fetchedNews 값이 비동기로 응답된 이후에 연산되기 때문에 오류가 발생하지 않았을 것입니다. router-link의 생성을 응답 지연 시간에 맞춰 같이 늦출 수 있는 방법은 없습니다. 하지만 일반적으로 비동기 요청을 처리하고 데이터를 받아온 이후에 router-link를 렌더링하는 방식으로 구현하실 수 있습니다. 이렇게 함으로써 데이터를 받아오는 시간이 지연되더라도 오류 없이 라우터 링크를 생성할 수 있습니다. 그럼에도 불구하고 동적 데이터를 사용하는 라우터 링크의 생성을 미루고자 한다면, v-if 또는 조건부 렌더링을 사용하여 fetchedNews 값이 있는 경우에만 라우터 링크를 렌더링하도록 조건을 처리할 수 있습니다. 이해가 도움이 되셨길 바랍니다. 추가로 궁금한 점이 있으시면 언제든 문의해주세요!