1. 성능 최적화:
React는 리스트를 렌더링할 때, 각 항목에 고유한 key를 부여함으로써 어떤 항목이 변경되었는지 효율적으로 판단할 수 있다. 이를 통해 불필요한 재렌더링을 방지하고 성능을 최적화한다.
2. 컴포넌트 상태 유지:
key는 컴포넌트의 고유성을 보장하여 상태를 올바르게 유지하게 한다. key가 없으면 React는 리스트 항목을 순서대로 비교하므로, 항목의 순서가 바뀌면 컴포넌트의 상태가 의도치 않게 변경될 수 있다.
-
key는 리스트의 각 항목을 고유하게 식별.
-
key를 사용하면 React가 변경된 항목을 효율적으로 감지하여 성능을 최적화.
-
key는 컴포넌트 상태를 올바르게 유지하는 데 도움이 됨.
import React from 'react';
const ItemList = ({ items }) => {
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
export default ItemList;
유의사항
배열의 index를 key로 사용하면 안된다.
배열의 index를 key 값으로 사용하는 것이 일반적으로 권장되지 않는 이유는 다음과 같습니다:
- 항목 재배치 시 성능 문제 배열의 요소가 추가, 삭제 또는 재배치될 때, 인덱스를 key로 사용하면 React가 어떤 항목이 변경되었는지 정확하게 알 수 없다. 불필요한 재렌더링이 발생한다.
- 컴포넌트 상태 유지 문제 인덱스를 key로 사용하면 리스트 요소의 순서가 변경될 때 상태가 올바르게 유지되지 않을 수 있다.
key는 반드시 변하지 않고, 예상 가능하며, 유일해야 한다.
key 형제 노드에서만 고유하면 된다. 즉, 전역에서 고유할 필요는 없고 해당 배열 안에서만 고유하면 된다.
변하는 key(Math.random()으로 생성된 값 등)를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있다.
진짜 key로 쓸게 없다면 index를 사용할 수 밖에 없지만 ,그냥 고유한 키 하나 만들어서 하는게 더 좋을거같다.
