key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 랜더링을 진행한다.
리액트는 내용이 바뀔 때 마다 랜더링을 하는데 1000 개의 리스트가 있다고 가정했을 때 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 한군데가 달라졌네 ? 하고 전체를 재 랜더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다.
그러면 리액트는 key값을 통해 변한 내용인지, 변하지 않은 내용인지 구별하고 전체를 재 랜더링 하지않고 필요한 것만 변경해준다.
처음에 내가 key 값으로 index를 부여했다. 이때 이벤트가 일어낫을 때 페이지를 보자
key 값을 index로 줬을때 1번부터 인덱스 번호는 0 ,1 , 2, 3, 4 이다. 이때 내가 1번인덱스 즉 숫자 2를 지운다고 가정했을때
우리는 숫자 2만 지운것이다. 이때 숫자는 1 , 3 , 4 , 5 만 남게 된다. 이때 인덱스 번호는 0 , 1 , 2 , 3 일것이다. 라고 생각을 하게되는데
그렇지 않다. 각 고유 key값을 우리는 index로 줬기 때문에 남아있는 인덱스 번호는 0 , 2 , 3 , 4 가 된다. 이때 6이라는 댓글을 하나더 남기게 되면 페이지는 재 렌더링 되면서 숫자는 1 , 3 , 4 , 5 , 6 이 되고 인덱스 번호는 0 , 2 , 3 , 4 , 4가 된다. 재배열이 일어나면 인덱스 번호도 0 , 1 , 2, 3 , 4가 되어야 하는데 이런식으로 되기 때문에 항목들이 재배열 되지 않는다면 잘 작동 하겠지만 재배열 된다면 비효율적으로 동작한다. 위와 같은 이유로 각각의 key는 고유의 id를 가지고 있어야 한다.
react 공식문서 참조
인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. 컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용됩니다. 인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것입니다. 그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다.
수정하여
나는 key값을 각각 고유한 아이디 값을 주었다.