React에서 배열 렌더링할 때 Key 설정하는 이유

리액트에서 배열을 렌더링할 때 key를 설정해야 하는 이유 ?

 

리액트가 어떤 항목이 변경, 추가 또는 삭제되었는지 식별하고 가상 DOM을 효율적으로 업데이트하기 위해서입니다.

 

key를 사용하면 리액트는 각 항목의 고유한 식별자를 알 수 있으므로

 

변경된 부분만 업데이트하고 나머지는 그대로 유지할 수 있습니다.

 

---

■ key 설정의 필요성

- 효율적인 업데이트 : key가 없으면 리액트는 배열의 순서에 의존하여 모든 요소를 업데이트해야 합니다. key를 사용하면 변경된 요소만 업데이트하여 성능을 향상시킬 수 있습니다.

- 예측 가능한 동작 : key가 없으면 배열의 요소가 변경될 때 예측할 수 없는 방식으로 컴포넌트가 업데이트될 수 있습니다. key를 사용하면 리액트가 올바른 항목을 식별하고 정확하게 업데이트할 수 있습니다.

- 컴포넌트 상태 유지 : key는 리액트가 컴포넌트의 상태를 유지하는 데 도움이 됩니다. key가 없으면 컴포넌트가 재렌더링될 때 상태가 손실될 수 있습니다.

 

---

 

■ key 설정 시 주의사항

- 고유한 값 사용 : key는 형제 요소들 사이에서 고유해야 합니다. 데이터베이스의 ID와 같은 안정적인 고유 식별자를 사용하는 것이 좋습니다.

- 인덱스 사용 지양 : 배열의 인덱스를 key로 사용하는 것은 권장되지 않습니다. 배열의 순서가 변경되면 key가 변경되어 성능 저하 및 예기치 않은 동작이 발생할 수 있습니다.

- 동적 생성 지양 : key는 렌더링 중에 동적으로 생성되면 안 됩니다. key는 안정적이고 예측 가능해야 합니다.

- 전역 고유 불필요 : key는 전체 범위에서 고유할 필요는 없고, 형제 요소들 사이에서만 고유한 값이면 됩니다.

 

---

https://ko.react.dev/learn/rendering-lists

리스트 렌더링 – React