- 리액트에서 배열 항목을 렌더링할 때, key 값을 추가하지 않으면 아래와 같은 오류 메시지가 콘솔에 표시된다.
"Warning: Each child in a list should have a unique "key" prop."
* key 값이 필요한 이유
- 고유성을 보장 : key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에게 알려주어 나중에 매칭할 수 있도록 하며 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요하다.
- 성능 최적화 : key 속성을 제공함으로써 리액트는 리스트의 변경 사항을 더 빠르게 감지할 수 있다. 예를 들어, list의 일부가 업데이트되는 경우 virtualDOM에서 변화를 감지하고 realDOM과 비교하여 새로운 DOM을 연산할 때, realDOM의 모든 부분이 아닌 변화가 감지된 부분만 업데이트 할 수 있고 이는 최소한의 업데이트를 통해 DOM을 효율적으로 운용할 수 있다.
- 상태 관리 및 애니메이션 : key를 사용하면 리스트 아이템의 상태를 관리하고 애니메이션 효과를 적용하기 쉬워진다.
- key는 형제간에 고유해야하며, 다른 배열의 JSX 노드에는 동일한 key를 사용해도 괜찮다.
- key는 변경되지 않아야 하기 때문에, 렌더링 중에 생성하는 것을 지양하자.
학습 단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 정정하도록 하겠습니다.
'이것저것 스터디📚 > JavaScript' 카테고리의 다른 글
| React에서 서버와 통신하는 과정을 구현하는 방법 (1) | 2023.11.21 |
|---|---|
| Virtual DOM이란? (1) | 2023.11.21 |
| useReducer를 활용한 상태관리 흐름 (1) | 2023.11.21 |
| 해시 테이블(HashTable) (0) | 2023.11.14 |
| Prototype을 이용해서 상속을 구현하는 방법 (1) | 2023.10.24 |
