[7주차] React 배열 렌더링에서 Key를 사용하는 이유

📌 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

예를 들어, [딸기, 망고, 포도] 에서 [딸기, 포도]로 결과가 바뀌면
- 망고를 삭제한건지
- 포도를 삭제 → 망고를 포도로 교체
- 인지 알 수가 없다!
- → 배열의 변화를 정확하게 전달하기 위해 key를 사용해야 한다.
만약 [망고, 포도] → [사과, 망고, 포도]가 된 경우
- 리액트 입장에서는 처음에 데이터를 비교하였을 때 망고 ≠ 사과 이기 때문에
- 망고, 포도는 이미 존재하는 데이터임에도 불구하고
- 전체 순서가 변경되었다고 생각해 전체 요소를 새로 렌더링하게 된다.
- → 엄청나게 비효율적인 방식인 것이다.
- 만약 key값을 설정해 준다면, 리액트는 original DOM과 비교하여 사과만 새로운 데이터인 것을 빠르게 찾아내어 사과만 업데이트할 것이다.
- → key를 사용하면 효율적으로 DOM을 사용할 수 있다!
따라서 배열의 원소마다 고유한 key값을 설정해주면, 배열의 변화를 정확히 전달할 수 있으므로 효율적으로 DOM을 사용할 수 있다.
key값은 주로 데이터의 id를 사용한다.
key값은 배열의 항목들 간에서는 반드시 고유한 값이어야 한다.
- 전역 범위에서 고유한 값이어야 할 필요는 없다.

[망고(0), 딸기(1), 포도(2)] → [딸기(0), 포도(1)] 로 바뀐 경우
- 배열의 인덱스를 key로 사용하는 경우, 0번으로 망고를 식별하겠다는 것인데
- 위의 경우에는 0번이 딸기로 아예 데이터가 달라지게 된다.
- 따라서 리액트 입장에선 0번 key가 그대로 있기 때문에 망고가 없어진 것을 모르지만, 실제로 망고는 삭제된 것이다! → 문제 발생!
아래의 조건을 모두 만족하는 경우는 배열의 인덱스를 key로 설정해도 괜찮다.
- 배열의 요소 값들이 정적이고, 변경되지 않는 경우
- 렌더링할 항목에 안정적인 id가 없는 경우
- 배열을 재배열/필터하지 않는 경우