170 vue 반복문 key 값 주의

source: categories/study/vue-experiance/vue-experiance_9-99_71.md

170 vue 반복문 key 값 주의

  • 반복문 되는 리스트가 있는데,
  • 각 리스트에 어떤 상태가 있고,
  • 그 상태에 따라 리스트가 하나씩 삭제되거나 그런다면,
  • key 값을 단순히 index로 주면안된다.
    • 만약 두번째 리스트가 삭제돼 세번재 리스트가 두번째 리스트 위치가 된다면
    • 그 두번째 리스트가된 세번째 리스트는 두번째의 상태를 물려받을 것이다. (이렇게되면 의도치않게 그려질 수 있다.)
    • key 값으로 비교해서 key값이 일치하면 다시 그리지 않는? 바뀐 것만 그리는 아주 효율적으로 화면을 랜더링하기 위해.. 그렇게 설계되어있기 때문에, 이런 현상이 발생한다.
    • 여튼 key 값을 주의하자