근데 왜 index를 key 값으로 쓰면 안좋다는 거에요?

 

 

참조 : https://yozm.wishket.com/magazine/detail/2634/

 

 

너무 야무진 글을 읽고나서 남겨두기 위해서 조금 정리해본다.

 

map 등의 반복적인 함수에서 컴포넌트 사용시 key값을 반드시 사용해줘야 한다. 여기서 key값은 index값으로 사용하지 말라고 보통 권장한다. 이때 보통 이유를 배열이 변경이 되었을 때 성능저하가 있을 수 있다고 설명한다. 하지만 저 블로그는 여기서 한 발 더 나아가 왜 성능저하가 오는가에 대해 디테일하게 들어간다. 역시 프로출신들의 자세는 다르다. 그럼 우리도 한번 파고 들어보자.

 

key는 무슨 역할을 하나요?

<div>
  <li>밤편지</li>
  <li>너랑나</li>
</div>

 

위와 같은 리스트가 있다고 보자. [밤편지]와 [너랑나] 뒤에 새로운 요소가 추가 된다면 해당 요소만 계산하면 된다.

하지만 만약 새로운 요소가 [밤편지]와 [너랑나]의 앞에 추가 된다면?

[밤편지], [너랑나] 그리고 추가 요소까지 모두 새롭게 계산을 해줘야한다.

지금은 요소가 적어서 계산량도 적지만

리스트가 점점 많아질 수록 재계산을 많이 하게 된다. 여기서 key값이 중요한 역할을 한다.

 

<div>
  <li key='nightLetter'>밤편지</li>
  <li key='uandme'>너랑나</li>
</div>

위 구조에서 key값만 추가한 상태이다. 여기서 새로운 요소가 앞이나 뒤에 추가되면 어떻게 될까?

key값이 바뀌지 않는 이상, [밤편지]와 [너랑나]는 새로 계산되지 않고 새로 추가될 요소만 계산된다.

이게 key의 역할이다. key값이 변하지 않는다면 계산을 다시 진행하지 않고 이미 가지고 있는 값을 사용한다.

이런식으로 불필요한 계산을 줄이면서 성능 최적화를 이끈다. 

 

key값을 index로 사용한다면?

key를 사용하는 의미가 없어지게 된다. 위에 말 대로 key값의 변화를 가지고 재계산의 유무를 산정하는데,

index를 key로 사용한다면 매번 key값이 달라지는 결과를 가지고오고 모든 리스트 값이 재계산되게 한다. (안하니만 못하다는 말이..) 

 

또한 즉석에서 key값을 만들어서 사용하는 경우도 마찬가지다. 오히려 index를 사용할 때 보다도 더 많은 계산이 필요하다.

index는 적어도 추가, 삭제된 위치의 다음 리스트부터 모두 재계산되지만

즉석에서 만든 값을 추가한다면 모든 이벤트때 마다 리스트를 계속해서 계산해줘야하는 불상사를 가져온다. 

그러니 고민없이 그냥 item 의 id 값을 key값으로 사용합시다.

 

---

 

 

참조한 글 마지막의 말처럼,

key에 index를 사용하면 안된다고만 알고있는 사람과

이는 성능저하를 일으킬 수 있다는 사실을 아는 사람은 다르다는 것에 동의합니다.

또한 이런 깨달음을 통해서

다른 부분에 있어서도 새로운 관점을 가지고 이유와 문제를 파고드는 시각도 생길 수 있다고 봅니다.

열코딩합시당 :)