스스로 이해한것이라 확인이 필요합니다.

변경 전

<ul>
	<li>apple</li>
  <li>banana</li>
</ul>

변경후

<ul>
  <li>car</li>
	<li>apple</li>
  <li>banana</li>
</ul>

li안에 내용을 비교할 수 있으나 변경전 apple과 변경후의 두번째와 일치하는것을 조회하고 변경전의 banana가 변경후의 세번째와 일치하는것을 조회합니다. 조회가 끝나면 car만 앞에 추가할 수 있습니다. 하지만 조회하는 과정 자체가 비효율 적입니다. 트리 구조로 되어있기 때문에 재귀적으로 처리할때 그 비효율성은 극대화 될것입니다. 그래서 리액트는 비효율적인 조회를 택하는 대신에 li요소들을 모두 새롭게 생성합니다. 즉, apple과 banana 및 그 자식 노드들을 유지하지 않는것입니다. 유지하지 않고 새롭게 생성하는것도 같은 일을 반복하는것으로 비효율적입니다. 이때에 조회를 택하지 않는다고 하였는데 그러면 아무래도 변경이 되었다는 판단은 해야하기 때문에 ul의 자식요소의 개수가 변하였는지는 체크할 것이라고 생각합니다.

그럼 다음과 같이하면 어떻게 될까요?

변경전

<ul>
	<li key="3">apple</li>
  <li key="4">banana</li>
</ul>

변경후

<ul>
  <li key="2">car</li>
	<li key="3">apple</li>
  <li key="4">banana</li>
</ul>

key가 생겼기 때문에 key만 비교하면 됩니다. 만약 li각각에 자식 노드들이 있다면 다시 재귀를 돌아야할것입니다. key로만 비교해서 현재 2가 key인것만 추가되었다는것을 확인하고 그 이후 key 3,4의 자식 노드들을 재귀적으로 비교하지 않는것입니다.

그런데 map의 인덱스로 key를 부여할때 주의해야할 부분이 있습니다.

다음과 같은 상황을 가정해볼 수 있습니다.