리액트에서 여러 개의 요소를 리스트 형태로 렌더링할 때, 각 요소에 key 속성을 반드시 넣어야 합니다.
key를 넣지 않으면 콘솔에 빨간 경고 메시지가 나타나죠.
그래서 많은 경우 단순히 경고를 없애기 위해 key를 넣곤 합니다.
그런데 정말 key를 왜 쓸까요?
List와 key의 중요성
리스트에 5개의 요소가 있고, 여기에 새로운 요소 하나가 추가되어 총 6개가 되었다고 가정해 봅시다.
key가 없다면, 리액트는 어떤 요소가 바뀌었는지 알 수 없어 리스트 내 전체 요소를 다시 렌더링합니다.
key가 있다면 변경된 부분만 정확히 찾아서 렌더링하므로, 불필요한 업데이트를 줄이고 성능을 최적화할 수 있습니다.
안정적이지 않은 key로 인한 문제
map 메서드를 사용할 때 두 번째 인자로 전달되는 index를 간편하게 key로 사용하는 경우가 많습니다.
하지만 이는 좋지 않은 습관입니다.
앞서 설명한 것처럼, 리스트에 새로운 요소가 앞에 추가되었다고 가정해 봅시다.
이 경우 새 요소의 key는 0이 되고, 기존 요소들의 key는 모두 하나씩 밀리게 됩니다.
결과적으로 리액트는 모든 요소가 변경된 것으로 인식하고 전체를 리렌더링하게 됩니다.
물론 리스트가 정적 데이터라면 index를 사용해도 괜찮습니다.
다만 요소가 변경될 수 있는 리스트라면, 반드시 안정적인 key를 사용해야 합니다.
중복된 key로 인한 문제
하나의 리스트 안에 중복된 key가 존재하면, 리액트가 어떤 요소를 업데이트해야 하는지 정확히 판단하지 못하게 됩니다. 그 결과, 요소가 잘못 복제되거나, 업데이트가 엉뚱한 곳에 적용되는 등의 이상한 동작이 발생할 수 있습니다.
아직까진 리액트는 이런 경우에 명확한 오류를 던지지 않기 때문에, 문제가 생겨도 원인을 파악하기 어렵습니다. 따라서 key는 반드시 리스트 내에서 고유한 값으로 지정해야 합니다.
결론
- 리액트에서
key는 단순한 경고 제거용이 아니라, 리스트 렌더링의 성능과 안정성을 위한 필수 요소입니다. key가 없다면 리스트 내 전체 요소가 리렌더링되고,
index나 중복된key를 사용하면 예상치 못한 버그나 성능 저하가 발생할 수 있습니다.- 따라서 리스트를 렌더링할 때는 항상 고유하고 안정적인 값을
key로 설정해야 합니다.
