v-for와 ref의 동작 (배열)

<div v-for="data in items" :key="data.id">
  <div class="item-detail" @click="toggleDetail(data)" :ref="data.id">
    <!-- 기타 내용 -->
  </div>
</div>

toggleDetail(data) {
  // 다른 모든 항목의 상세 내용을 닫기
  this.items.forEach((d) => {
    if (d !== data) {
      d.showDetail = false;
    }
  });

  // 클릭한 항목의 상세 내용 토글
  data.showDetail = !data.showDetail;

  // 스크롤 이동
  if (data.showDetail) {
    this.$nextTick(() => {
      const element = this.$refs[data.id][0];
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  }
}

1. v-for와 ref를 함께 사용할 때의 동작 방식

• v-for와 ref를 함께 사용하면 Vue는 해당 ref 이름을 가진 모든 요소를 배열 형태로 반환함.
• 반복된 ref가 있을 가능성을 고려해, Vue는 항상 안전하게 배열로 관리함.
• 각 ref는 유일하더라도, Vue는 일관성을 유지하기 위해 배열로 처리함.

2. this.$refs[data.id]의 의미

• this.$refs[data.id]는 ref로 설정된 모든 요소를 배열로 반환함.
• v-for에서 동일한 ref 이름을 가진 여러 요소가 생성될 수 있으므로, Vue는 모든 ref를 배열로 관리하는 구조를 가짐.
• 예를 들어 data.id가 고유하더라도, Vue는 안전하게 해당 요소를 배열로 처리함.

3. [0]의 의미

• this.$refs[data.id][0]에서 [0]은 배열의 첫 번째 요소에 접근하는 것임.
• 배열에는 동일한 ref를 가진 모든 요소가 들어가지만, 고유한 ref를 사용했기 때문에 배열에는 하나의 요소만 포함됨.
• 따라서 [0]을 사용해 그 유일한 요소에 직접 접근하고 있는 것임.

4. 결론

• v-for에서 ref를 사용하면 Vue는 항상 해당 ref들을 배열 형태로 반환함.
• 반복된 요소들이 있을 가능성에 대비해, Vue는 일관성을 유지하기 위해 배열로 처리함.
• [0]을 통해 배열의 첫 번째 요소(사실상 유일한 요소)에 접근하는 것이 적절한 방식임.

따라서, **this.$refs[data.id][0]**에서 [0]은 고유한 ref를 가진 DOM 요소에 접근하기 위한 인덱스 역할을 함. Vue가 ref를 배열로 반환하는 이유는 반복된 참조를 안전하고 일관되게 관리하기 위해서임.