[React] `key`의 중요성

리액트를 배우면서 반복문으로 출력된 dom 요소의 경우 `key`를 명시해주어야 하는 것을 알고 있었다. 하지만 지금까지 `key` 를 쓰지 않거나, 대충 사용했을 경우에 대한 문제를 직면해본적이 없어서 그냥 저냥 콘솔에 `key`가 잘못 되었다는 에러를 숨기기 위한 목적 정도로만 사용을 해왔었다. 

 

🚨 토스트 라이브러리 구현

하지만 토스트 라이브러리를 직접 만들어보고, 커스텀하는 작업을 진행중에 `key` 를 쓰지 않아 버그가 발생했다.  토스트 라이브러리를 사용해본 사람은 알겠지만 순차적으로 쌓였다가 하나씩 사라지게 된다. 토스트 요소의 시간이나, 메시지, 색상 등이 전부 동일하다면 `key`를 `index`를 주어 사용해도 문제가 생기지 않는다(정확히는 문제가 생겨도 보이지 않는다). 하지만 이번에 라이브러리를 만들면서 시간, 색상 등을 사용자가 커스텀 할 수 있도록 만드는게 목표였기 때문에 바로 문제가 생겼다. 

 

🚨 처음으로 key를 잘못 사용해서 생긴 버그

예를 들어 첫 번째 토스트의 색상이 빨간색, 프로그래스바 false, 3초 지속  그리고 두 번째 토스트의 색상이 파란색, 프로그래스바 true, 5초 지속으로 지정되었다고 가정해보자. 그리고 나는 `key`를 토스트 배열의 index로 사용하고 있었다. 그리고 첫 번째 토스트가 사라질 때 두 번째 토스트의 설정 값이 첫 번째 토스트의 설정 값을 따라서 리렌더링이 되는 버그가 발생했다.

 

글로 작성하니 쉬운 문제처럼 보이지만 에러 메시지도 나오지 않고 전혀 예상치 못한 버그가 발생한 것이기 때문에 어느 부분에서 버그가 발생했는지 디버깅 자체가 너무 어려웠다. 그냥 문득 `key={index}` 라는 코드가 보이지 않았다면 한참을 더 헤매다 버그를 발견했을 것 같다. 

 

🚨 해결 방법

• 각 토스트가 생성될 때마다 임의의 `uid` 값을 생성했다.
• 그렇게 생성된 id값을 `key`에 index 대신 넣어주었다.

 

💡 정리

일반적으로 수정/삭제 등이 일어나지 않는 요소일 경우에는 index를 사용해왔어도 문제가 생길일이 거의 없었을 것이다. 하지만 조금 편하게 가려고 `key`값을 명시하지 않는 습관이 잡혔을 때 나중에 큰 문제가 생길 수 있으니 `key` 사용에 주의하자.