안녕하세요! v-for(v-bind:key), slice() 관련 질문이 있어요!

Question

안녕하세요! 매번 답변을 잘해주셔서 너무 감사합니다 v-for을 만드는 경우 :key를 설정해줘야한다고 알고 있습니다. :key를 뭘로 또는 어떤걸로 설정하는게 좋나요? 랜덤한 유니크 값을 생성해서 넣어야 한다는 얘기도 있어서 궁금해서 여쭤봅니다! 여기서는 일단 id 값으로 넣었습니다. 두번째로 @Watch 로직을 만들때 this.data.slice().filter(...) 로 하시더라구요. this.data.filter(...)도 동작을 하는데 slice()를 넣어주신 이유가, data가 any[] 이기때문에 무엇이 올지 모르니 일단 array로 만들어야겠다 라는 생각으로 하신걸까요?

성도희 · Answer

안녕하세요! 1. v-for의 :key 관련 말씀해주신대로 유니크한 값을 넣어주어야합니다. 이는  Vue에서 개별 DOM 노드들을 추적하고 기존 엘리먼트를 재사용, 재정렬하기 위해서 입니다. 보통, 서버 통신해서 가져온 list array를 v-for로 표현할 때에는  데이터마다 고유한 id값이 있어 그것을 활용하는 편입니다. 클라이언트에서 생성한 array를 표현할 경우에는 array index + 랜덤한 해시값 or id 값으로 key 값을 만들기도 합니다. 어찌됬든 " 중복되지 않는 유니크한 값 "이 중요한 키포인트에요 ^^ 2. slice 관련 이부분은 제가 강의를 제작할 당시 착각한 부분이 있는데, javascript array api들 중 콜백 함수에서 호출한 array에 직접 영향을 끼치는 api들이 있습니다. 예를 들어 map 같은 경우가 그렇구요. 그 경우를 방지하기 위해서  slice()를 사용해 새로운 배열을 생성한 후, 기존 배열에는 영향이 없도록 하는것이 저의 의도였습니다. 그러나 filter의 경우에는 map과 달리 기존 배열에 영향을 끼치지 않으니 글쓴님께서 말씀해주신 코드( this.data.filter(...) )가 더 올바르다고 할 수 있습니다. 혼동을 드려 대단히 죄송합니다 ㅠ.ㅠ

haemil · Answer

저도 이 부분이 궁금했는데 질문자님과 도희님께 감사드립니다.

아로마홈키퍼 · Answer

친절한답변감사합니다.