React에서 list를 다룰 때 각 item에 key를 넣어주어야하는 이유

리액트로 개발을 할 때 아래 에러를 자주 만나게 됩니다.

 

---

 

list의 child에 key를 넣으라는 내용입니다.

 

 

 

저 빨간 경고문이 거슬려서 일단 map에서 제공해주는 index 값을 key에 전달해서 해결해 오긴 했는데...

*아래 코드는 보통 해결하고 넘어갈 때의 코드 모습

const fruits = ['apple', 'banana', 'melon'];
<ul>
{fruits.map((fruit, index) => 
   <li key={index}>{fruit}</li>
)}
</ul>

왜 key를 넣어주어야하는 것인지, index를 넣어주어도 괜찮은건지 궁금해서 공식 문서를 뒤져봤습니다.

 

 

 

결과적으로 index를 key로 전달하지 않으면 리액트가 알아서 index를 key에 넣어준다는 것과, index를 key로 넣어줘도 상관이 없다는 것이 제가 알아낸 사실이었습니다.

단, 이 얘기는 리스트 내의 item들이 순서가 변경되지 않는다는 조건이 있습니다.

 

 

 

순서가 어떤 의미가 있는지 알아보면,

리액트에선 re-rendering이 발생할 때 화면을 다시 그리며 이 과정에서 이전 화면과 비교한다고 합니다.

그리고 비교했을 때 key 값이 동일하면 다시 렌더링하지 않는다고 하네요.

 

 

 

이 말이 사실인지 직접 테스트 해보았습니다.

input을 통해 새로운 todo를 ul 태그 내부에 추가하는 코드입니다.

각 li의 key는 index 혹은 id(timestamp로 만들어준 고유 값)로 설정해보았습니다.

 

 

 

첫 번째 테스트

key: index, id

방향: 오름차순

설명: 새로운 li가 추가되어도 기존의 li들의 key값은 변하지 않습니다. 그래서 화면에 다시 그려지지 않습니다.

*화면에 다시 그려지지 않는지는 왼쪽 li 태그가 깜빡거리는 것으로 파악 가능

key가 index, id(고유)일 때 오름차순

 

 

 

 

두 번째 테스트

key: id

방향: 내림차순

설명: 새로운 li가 추가되면 마찬가지로 기존의 li들의 key값은 변하지 않습니다. 그래서 화면에 다시 그려지지 않습니다.

*화면에 다시 그려지지 않는지는 왼쪽 li 태그가 깜빡거리는 것으로 파악 가능

key가 id일 때 내림차순

 

 

 

세 번째 테스트

key: index

방향: 내림차순

설명: 새로운 li가 추가되면 기존의 li들의 key값 또한 변합니다. 그래서 화면에 다시 그려집니다.

*화면에 다시 그려지지 않는지는 왼쪽 li 태그가 깜빡거리는 것으로 파악 가능

key가 index일 때 내림차순

 

결론

만약 리스트를 다룰 때 내부 아이템들의 순서가 변경되지 않는 것이 보장되면 key에 index를 전달해도 상관이 없을 것입니다.

하지만 그렇지 않으면 key에 고유 id를 전달하는 것이 성능적인 면에서 필수적인 선택이 될 것입니다.(리렌더링 시에 화면에 그려져야하는 컴포넌트 수에 영향을 주므로)

 

# 참고 링크

1. https://ko.reactjs.org/docs/lists-and-keys.html#keys

리스트와 Key – React

2. https://ko.reactjs.org/docs/reconciliation.html#keys

재조정 (Reconciliation) – React