Key의 중요성

Key의 중요성

React 프로젝트 중에 이상한 에러를 발견했다.

저 테이블의 row는 아래와 같은 방법으로 뿌렸다.

나는 key가 정말 중요하지 않다고 생각하고 그냥 배열의 index로 뿌려줬는데, 문제의 원인이 저 key였다.

농구을 지우기 전에는 state는 아래와 같았는데,

농구을 지우고 나면 state에는 축구만 남게된다.

그럼에도 불구하고 왜 축구가 지워지고 농구는 남게된걸까? 

그 이유는 내가 postInfos.map 할때, PostInfoRow의 key를 index로 설정해 줬기 때문이다. React는 Component List를 그려줘야할때 성능을 위해서 Component List안의 개별 Component에 할당된 Key를 바탕으로 뭐 변한게 있는지, 제거됬는지 등을 판단한다.

Key는 React가 어떤 item이 변했는지, 더해졌는지, 제거됬는지를 판별하는데 도움을 준다

from : https://reactjs.org/docs/lists-and-keys.html#keys

PostInfoRow 에 들어가는 내용물(props)는 분명 달라졌지만, key가 같기 때문에 이전에 그려진(메모리에 아직 남아있는) Component를 제거 하지도 않고 새로 들어온 내용물을 바탕으로 Component를 initialize 하지도 않아서 저렇게 축구가 아닌 농구가 그대로 남아있던 것이다.

그래서 React 공식 문서에서는 index를 key로 할당하지 말라는 당부의 말도 있다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

Up Next:

Terminal에서 node index.js를 치면 무슨일이 일어날까?

Terminal에서 node index.js를 치면 무슨일이 일어날까?