인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요! v-for(v-bind:key), slice() 관련 질문이 있어요!
작성
·
508
2
안녕하세요! 매번 답변을 잘해주셔서 너무 감사합니다
v-for을 만드는 경우 :key를 설정해줘야한다고 알고 있습니다.
:key를 뭘로 또는 어떤걸로 설정하는게 좋나요?
랜덤한 유니크 값을 생성해서 넣어야 한다는 얘기도 있어서 궁금해서 여쭤봅니다!
여기서는 일단 id 값으로 넣었습니다.
두번째로 @Watch 로직을 만들때
this.data.slice().filter(...) 로 하시더라구요.
this.data.filter(...)도 동작을 하는데
slice()를 넣어주신 이유가, data가 any[] 이기때문에
무엇이 올지 모르니 일단 array로 만들어야겠다 라는 생각으로 하신걸까요?
답변 3
3
안녕하세요!
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(...))가 더 올바르다고 할 수 있습니다.
혼동을 드려 대단히 죄송합니다 ㅠ.ㅠ
1
1
