[코드잇 스프린트 풀스택 4기] 리액트 배열 렌더링 시 key를 지정해야 하는 이유

1. 리액트에서는 컴포넌트가 state변경, 이벤트 발생 등에 의해 렌더링 될때 virtual DOM을 통해 이전의 렌더링 결과와 새로운 렌더링 결과를 비교하고 변경된 부분만 재렌더링한다. 이때 배열도 마찬가지로 각 원소를 하나씩 비교하여 변경된 부분을 감지하게 되는데 이때 배열의 key가 어떤 요소가 변경이 되어 재렌더링이 필요한지를 식별하는데에 필요한 역할을 하게 된다.
2. 그런데 배열의 Index를 사용하여 key를 지정하게 되면 문제가 발생한다. 배열의 index는 배열의 수정에 의해 변경될 수 있기 때문에 엘리먼트를 구분하는 고유한 값이 될 수 없기 때문이다. 또한 배열이 변경되면 각각의 엘리먼트들이 재렌더링되므로 불필요한 렌더링을 발생시킬 수 있다.
3. 물론 배열이 절대 변경될 가능성이 없다면 사용해도 좋겠으나 고유성과 안정성을 위해서는 고유한 키를 생성(난수 발생 등)하여 사용하는 것이 권장된다.