이제 키를 여기에 추가하면
또 다른 이점이 있습니다
상태가 건너뛰는 것을 방지하는 것 외에 다른 이점입니다
이 이점을 보여주기 위해서, 잠시 돌아가
index를 사용해보겠습니다
이전에 봤던 것처럼 좋지 않은 방법입니다
왜냐하면 그렇게 하고 새로고침을 한 후
elements 창에서 이 목록 보면
목록을 자세히 보면
오른쪽에 있는 목록 항목을
제가 버튼을 누를 때 잘 보시기 바랍니다
제가 버튼을 누를 때마다
목록 항목들이 전부 바뀌는 게 보입니다
전부 깜빡이는데, 그건 전부 바뀌었다는 의미고
리액트의 개입을 받았다는 뜻입니다
이런 일이 생기는 건 지금
index를 키로 사용하고 있기 때문에
예를 들어 '증가하기' 버튼을 누를 때마다
리액트가 DOM 스냅샷을 생성하고
결국 완전히 다른 HTML 코드가
렌더링되어야 한다는 게 알게 됩니다
여기 새로운 아이템이 추가됐기 때문입니다
다 바뀌었으니 이전 목록은 버리고
새로운 목록을 재-랜더링해야 합니다
하지만 물론, 사람인 우리들 입장에서는
그게 아니라는 걸 알 수 있습니다
첫 번째 목록 항목만 추가됩니다
버튼을 눌렀을 때의 이야기입니다
다른 항목들은 그저 이전 목록이
한 칸 밑으로 내려간 것 뿐입니다
하지만 우리가 지금 index 키를 사용하고 있기 때문에
리액트는 그걸 알지 못합니다
만약 count ID 라는 더 나은 키로 대체한다면
이런 결과가 보입니다
저장하고 새로고침 후 다시 목록을 봅시다
이 오른쪽에 있는 목록을 보시면
수정하고 나니까
이제 목록의 부분적인 부분들만 업데이트되고
다른 요소들은 업데이트, 즉 깜빡이지 않습니다
대신, 이 첫 번째 요소만 사실상
업데이트된 겁니다
만약 두 번째 요소도 깜빡이는 게 보인다면
그건 그냥 제가 너무 빨리 클릭해서 그런 겁니다
원래는 첫 번째 요소만 업데이트됩니다
이제는 리액트가 다른 요소들이
이전 DOM의 한부분이었다는 걸 알기 때문입니다
즉 이전 가상 DOM 스냅샷의
키를 알기 때문입니다
그 키가 거기에도 저장되어 있기 때문입니다
그래서 이전 DOM 요소들을 재사용할 수 있고
재생성하지 않아도 됩니다
그냥 새로운 요소를 앞에 삽입하기만 합니다
그래서 이전 강의에서 봤다시피 키를 사용하는 건
상태 관리에만 도움이 되는 것이 아닙니다
대신, 리액트가 목록을
더 완벽하게 개선할 수 있도록 도와줍니다