인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
213. 상세(디테일) - 정보-2 질문
작성
·
8
0
213. 상세(디테일) - 정보-2 수업에서
DetailInfo.vue 파일에서 장르 배열안의 name 값
"genres": [
{
"id": 16,
"name": "Animation"
},
{
"id": 10751,
"name": "Family"
},
{
"id": 35,
"name": "Comedy"
},
{
"id": 12,
"name": "Adventure"
},
{
"id": 9648,
"name": "Mystery"
}
],
name 값들을 가져올때
배열 전체를 가져오는건 이상이 없으나
<li>
{{ props.movieDetail.genres }}
</li>
이렇게 for문을 돌려 name 값만 가져오려고 할땐 오류가 발생합니다.
<li
v-for="(genre, index) in props.movieDetail.genres.map(
(v) => v.name
)"
:key="index"
class="features-item"
>
{{ genre }}
</li>이렇게 코드 작성을 하면 section 태그 자체가 무한 렌더링이 걸리는 오류가 생깁니다 원인이 뭔지 모르겠습니다. 실제 예제 코드에 있는걸 전부 복붙해와도 동일한 결과만 반복됩니다.
gpt에 물어봐도 전혀 원인을 모르겠네요..
답변 2
0
안녕하세요!
map에서 무한 렌더링처럼 보이는 건, 진짜 “무한 루프”라기보다는 초기 렌더에서 에러가 계속 나면서 다시 시도하는 상황일 가능성이 큽니다.
props.movieDetail.genres가 undefined일 때를 대비해서 아래처럼 v-if로 체크를 한 번 해보세요!
<section v-if="props.movieDetail && props.movieDetail.genres">
<ul>
<li
v-for="(genre, index) in props.movieDetail.genres.map((v) => v.name)"
:key="index"
class="features-item"
>
{{ genre }}
</li>
</ul>
</section>그래도 안되시면 코드를 sucoding@naver.com으로 압축해서 보내주시면 확인해드리겠습니다 🙂
0
안녕하세요, 인프런 AI 인턴입니다. athena1998님.
v-for 안에서 Vue.js의 map 메서드를 사용하려다 렌더링 문제가 발생하셨군요. 이러한 무한 렌더링 문제는 주로 computed 속성 내에서 map 을 사용했을 때 발생할 수 있습니다. 이 경우, Vue는 props가 변경되었다고 잘못 감지하여 계속 렌더링을 트리거하는 상황이 발생할 수 있습니다.
다음과 같이 computed 속성을 사용하여 genres 배열의 name 값만을 가진 배열을 만들어 사용하면 문제를 해결할 수 있습니다:
<template>
<section>
<li
v-for="(genreName, index) in genreNames"
:key="index"
class="features-item"
>
{{ genreName }}
</li>
</section>
</template>
<script>
export default {
props: {
movieDetail: Object
},
computed: {
genreNames() {
return this.movieDetail.genres.map(genre => genre.name);
}
}
}
</script>
이 코드는 무한 렌더링을 방지하면서 원하는 genres의 name값들을 렌더링합니다. 주의할 점은 props가 불변 객체로 관리되어야 하며, computed를 통해 최종 데이터를 처리하는 것이 성능상 더 이점이 있다는 점입니다.
유사한 문제를 다룬 기존 질문들을 확인해 보시길 바랍니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.