[React] 배열에서 key를 사용해야하는 이유

배열에서 key 값을 사용하지 않으면

https://hi-claire.tistory.com/34

Warning: Each child in a list should have a unique "key" prop. 해결 방법

Warning: Each child in a list should have a unique "key" prop.

위와 같은 경고메세지가 출력되는 것을 봤을 것이다.

 

배열을 렌더링할 때 key를 지정하지 않거나,

key를 지정하더라도 배열의 인덱스와 같이 데이터를 구분할 수 없는 고유하지 않은 값으로 key를 지정하면 랜더링이 잘못 될 수 있다.

 

왜 key값을 사용해야 하는가?

예를 들어, 여기 사과, 망고, 포도라는 배열을 렌더링한다고 가정해 보자.

여기서 망고가 없는 배열로 바뀌면 보통은 "망고가 삭제됐다"라고 할 것이다.

이 경우 마지막 요소인 포도를 제거하고, 두 번째 요소인 망고를 포도로 바꿀 수도 있다.

즉, 바뀐 배열의 결과값만을 가지고 어떻게 바뀐 건지 알 수 없다.

 

하지만, key 를 사용할 경우 결과만 보고도 "망고가 삭제 됐구나"하는 것을 알 수 있다.

이런 식으로 배열의 변화를 리액트에 정확하게 전달하려면 key를 고유한 값으로 정해줘야 한다는 것을 알아둬야 한다.

 

리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용하기 때문이다.

가상 돔을 이용해서 바뀐 부분만을 실제 돔에 적용해주는 것이 리액트의 작동 방식인데,

리스트를 나열할 때 바뀐 부분만 찾을 때 key를 이용해서 어떤 부분이 바뀌었는지 인식할 수 있기때문에

key를 작성하는 것을 습관화하여야 한다.