[React] map 함수 적용시 key props를 부여하는 이유 (+index 안돼!)

 

[React] map 함수 적용시 key props를 부여하는 이유

 

---

 

본론부터 말하자면 key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 랜더링을 진행한다.

 

 

key값 부여 안하면 어떻게 될까? 🤓

너 key prop 지정 안했는데?

콘솔에 에러 메세지가 뜬다.

너 동일한 형제들로 구성된 list(map에서 뿌려준 그 lists) 유닠크한 키 prop을 줘야돼.

 

 

왜 필요하지? 🤔

map으로 요소를 하나씩 뿌려준다고 하자.
리액트는 내용이 바뀔 때 다시 랜더링을 하는데 10개의 리스트중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 여기서 달라졌네? 하고 전체를 재 랜더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다.

그러면 리액트는 key값으로 변한 내용인지, 아닌지 구별하고 전체 재 랜더링이 아닌 필요한 것만 변경해준다.

 

 

그럼 이제 key prop을 줘보자 🔑

Mock Data 입힐 때 넣어준 id

map으로 뿌려주는 각각의 코멘트에 item의 id를 하나씩 부여하자.

이제 각각의 코멘트는 각각의 key값을 가지게 되었다.

 

 

key에 index를 주면 안되냐 🤷🏻‍♀️

일단 대답부터 하자면 "그렇다(응 안돼)" 이다.

React의 공식문서도 이렇게 말하고 있다.

인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. 컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용됩니다. 인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것입니다. 그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다.

항목들이 재배열 되지 않는다면 잘 작동 하겠지만 재배열 된다면 비효율적으로 동작한다.

예를 들어보자.

input을 사용자가 동적으로 추가하고 입력할 수 있을 때, key를 index로 주게되면 내가 입력한 input의 value가 +1 되어서 이동(?) 될 것이다. 그래서 공식문서는 재배열을 언급한 것이다.

 

 

참고

• key가 필요한 이유 | React 공식 문서
• key에 index를 부여하면 안된다 | Robin Pokorny

재조정 (Reconciliation) – React

Index as a key is an anti-pattern