Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요!

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으로 압축해서 보내주시면 확인해드리겠습니다 🙂

안녕하세요, 인프런 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를 통해 최종 데이터를 처리하는 것이 성능상 더 이점이 있다는 점입니다.

유사한 문제를 다룬 기존 질문들을 확인해 보시길 바랍니다:

• Vue computed 속성과 map 메서드 관련 문제

• Vue.js의 v-for와 map 사용시 발생하는 문제점과 해결 방안

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.