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

프로젝트를 진행하다보니, map 함수 적용할 때 key props가 얼마나 중요한 지 알 수 있었다.🤦‍♀️ key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 렌더링을 진행한다.

map함수 적용시 Key props를 사용하는 이유는?

아래와 같이 key값이 없는 elemen에 새로운 element가 추가될 경우, React는 부모요소의 모든 자식요소를 다시 변경해야한다.

변경 전 
<ul> 
  <li>라이언</li> 
  <li>어피치</li> 
</ul> 

변경 후 
<ul> 
  <li>라이언</li> 
  <li>어피치</li> 
  <li>곰돌이</li> 
</ul>
: <ul>의 모든 자식요소를 다시 변경하게 된다. 

key를 이용하면 이러한 비효율성을 해결할 수 있다. 자식요소들이 key를 가지고 있다면, react가 key를 통해 기존 자식 요소와 변경된 자식 요소가 일치하는지 확인하므로 변환이 효율적으로 이루어진다.각각의 요소들이 고유한 정체성을 가지도록 key값을 부여해야 한다.

변경 전 
<ul> 
  <li key="1">라이언</li> 
  <li key="2">어피치</li> 
</ul> 

변경 후: <key="3"> 값만 이동시킨다. 
<ul> 
  <li key="1">라이언</li> 
  <li key="2">어피치</li> 
  <li key="3">곰돌이</li> 
</ul>

key엔 어떤 값을 써야할까?

Key 값은 list에서 해당 항목을 고유하게 식별할 수 있는 문자열이 가장 좋다.대부분의 경우 데이터의 ID를 key로 사용한다.

배열의 index를 사용하는 건 지양하자

key값을 배열의 index로 지정할 경우, 배열의 순서가 바뀌면 component의 state와 관련된 문제가 발생할 수 있다. component는 key를 기반으로 갱신/재사용되는데 index를 key로 사용하면, 항목의 순서가 바뀌었을 때 key도 변경된다. 따라서 state까지 의도치않게 변경될 수 있다.

명시적으로 key를 지정하지 않을 경우 React는 기본적으로 인덱스를 key로 사용하니, 가급적이면 별도로 key값을 지정해야한다.