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

😭 몰아서 하는 블로깅 마지막 3탄! 이자 state, props 마지막 과제 key에 관한 정리를 해보자.

우선 감회가 새로운게 새삼 state와 props를 다시 적어보니 약 80%는 내가 이해하고 있지 않을까? 싶은 느낌이 든다, 처음에 접했을 땐 정말 뭐가 뭔지 ㅠㅠ... 나른 감동...

리액트를 통해 map을 통해 배열을 리스트로 출력 할 때 구분짓기 위한 key 값을 요구하는데 이 key를 통해 리액트는 다른항목들 사이에서 고유하게 식별 할 수 있는 기준을 삼을 수 있다.
말이 좀 어려운데..(내가 봐도.. 써도 어려움..)
단순하게 예를들면!

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>

요런 상황에서 A와 B사이에 끼워 넣고 싶을 때 다 같은 <div>이기 때문에 특정짓기 어려운데

<div key={0}>A</div>
<div key={1}>B</div>
<div key={2}>C</div>
<div key={3}>D</div>

이렇게 key값을 부여하게되면 0과 1 사이에 넣어라 라고 특정 지을 수 있게 된다.
보통 map을 이용해서 리스트를 출력할 때 index를 활용해서 key를 부여할 수도 있는데

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

이럴경우 순차적으로 리스트가 쌓이는 구조라면 상관없지만 중간에 삽입되거나 맨처음에 삽입될 경우 index값이 변경됨에 따라 전체적으로 다시 랜더링 되는 경우가 생기고 또 index를 활용해 로직을 구성할 때 변경될 경우 key값도 변경되는 경우도 생기기 때문에 최대한 index값을 key로 부여하는것은 지양하고 고유의 식별 값(id와 같은)을 생성해서 부여해 주는 것이 좋다고 한다!

누구든지 하는 리액트(벨로퍼트), 리액트 공식 사이트를 참조 하였습니다.