💡 key속성 사용 이유
리액트는 컴포넌트의 상태나 속성(prop)이 변할 때마다 render()함수를 호출하는데, 이 때 render()함수는 새로운 리액트 요소 트리를 반환하고 이를 기존의 요소 트리와 비교해 새로운 변경점에 대해서만 재렌더링을 수행합니다.
여기서 기존 요소들 뒤에 새로운 내용을 추가할 경우 새로운 부분에 대해서만 재렌더링 되지만 새로운 요소를 기존요소 앞에 추가할 경우 모든 부분이 재렌더링 됩니다. 바로 이런 상황을 최적화 하기 위해 key 속성을 사용합니다.
각 요소에 key 속성을 부여하면 더 이상 모든 요소를 렌더링하지 않고 추가된 부분만 재렌더링 하는 효율적인 렌더링을 시도합니다.
💡 key속성 사용시 주의할 점
인덱스를 key값으로 사용할 때 문제가 발생할 수 있습니다. 순서가 변할 수 있는 상황에서 고유한 key값을 사용하지 않고, key값을 인덱스로 설정하면 key를 사용하지 않은 것과 같이 모든 형제 요소가 재렌더링 됩니다. 이는 성능하락이나 예상치 못한 문제를 발생시킵니다. 따라서 해당 데이터가 갖는 id값이나 별도의 고유 id라이브러리 등을 사용해 언제나 요소의 key값이 고유함을 보장해야 합니다.
+) 변하는 key (Math.random()으로 생성된 값 등)를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있다.
쉬운게 좋은 FE개발자😺