리액트에서는 배열을 렌더링 시 배열 요소의 고유한 key값을 통해 컴포넌트의 변화를 빠르게 식별하고 파악하는 것을 돕는다. key값을 설정해주지 않으면 리액트 자체적으로 error를 발생시키는데 이는 key 값을 설정해주지 않았을 때 발생하는 부작용을 막기 위해서이다.
예를 들어 다음과 같은 배열이 있다고 해보자
const list = [1, 2];
이 배열의 맨 앞에 3을 추가해보자.
list = [3, 1, 2];
가장 효율적으로 배열을 수정하는 방법은 맨 앞에 3을 추가해 주는 방법일 것이다.
그러나 리액트 DOM이 렌더링 될 때는 이전 virtual dom과 변화가 일어난 후의 virtual dom을 비교하므로,
즉 변화한 부분을 비교하므로
1번이 3번으로 바뀐 것인지, 3이 맨 앞에 추가된 것인지 알 수 없기 때문에 맨 앞 요소부터 비교해 나간다.
따라서 1을 3으로, 2를 1로 바꾸고 2를 맨 뒤에 추가하게 된다.
이 비효율적인 일을 방지하려면 각 요소에 key값을 매겨주면 된다. 예를 들어 1에 a, 2에 b라는 key 값이 있었고 새로 추가한 3의 key 값이 c라면, React는 c라는 id를 가진 요소가 추가됐다는 것을 알아차리고 맨 앞에 3이라는 요소만 추가해 렌더링 하게 된다.
따라서 key값은 배열이 가지고 있는 고유한 값으로 설정해주는 것이 좋다.
보통은 요소가 객체인 경우가 많기 때문에 객체의 id 값으로 설정해 준다. id가 없다면 문자열을 임의로 지정하기도 한다.
index값은 가급적 사용하지 않는 것이 좋다. 바뀔 수 있는 값이기 때문이다.