map 사용하기!

리액트를 사용하다 보면 아주 많이 쓰는 map!
(저만 많이 쓰는건가요.....)

저는 보통 map을 사용할 때 이런 형태로 썼었습니다.

array.map((element, idx) => (
   	<div key={idx}>{element}</div>
))

하지만 이렇게 쓰묜 안됩니다학!!!

공식문서를 확인해보면

React는 key 속성을 지원합니다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인합니다. 예를 들어, 위 비효율적인 예시에 key를 추가하여 트리의 변환 작업이 효율적으로 수행되도록 수정할 수 있습니다.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

위와 같은 코드에서 2015와 2016은 이미 있기 때문에 이동만 해주면 됩니다.

따라서 결론!

react는 렌더링 과정에서 key 를 체크하여 렌더링 할지 말지를 결정합니다!

결론! key는 고유한 값이 주는 것이 좋다!

사실 써도 무방하긴 합니다!

하지만!

삭제 혹은 수정이 되는 값들이라면 key 값이 재할당 될 것 이고 이는 성능에는 좋은 영향을 미치지 못하게 될 것 입니다.

따라서 map으로 출력할 내용들이 변동될 일이 있다면 고유한 key 값을 사용하는 것이 좋습니다.

해당 링크에 이와 관련된 좋은 예시가 있어 남깁니다.