key값은 React에서 배열을 렌더링할 때 성능 최적화와 관련이 깊다.
주로 배열 아이템을 추가, 수정, 삭제할 때 리액트가 각 아이템을 어떻게 추적할지 결정하는 데 중요한 역할을 한다.
구체적으로key값이 왜 중요한지, 그리고 배열 렌더링 최적화와 어떻게 연결되는지 알아보았다.
⚠️ 고유한 key 값을 지정하지 않아서 발생한 에러
리액트에서 배열을 렌더링할 때 key를 사용해야 하는 이유는 업데이트의 효율성과 렌더링 성능을 보장하기 위해서이다. key는 각 항목을 고유하게 식별하는 역할을 한다.
이를 통해 리액트는 변경된 항목만 업데이트하고, 불필요한 리렌더링을 방지할 수 있다. 따라서 key를 사용하여 배열을 렌더링하면 성능 향상과 업데이트 효율성을 보장할 수 있다.
유일성 보장
key는 각 항목을 식별하는 유일한 값이다. 배열의 각 항목은 고유한 key 값을 가져야 한다. 이를 통해 리액트는 각 항목을 식별하고 변경된 항목만 업데이트할 수 있다.
성능 최적화
key를 사용하면 리액트가 각 항목을 효율적으로 업데이트할 수 있다. key가 있는 경우 리액트는 변경된 항목만 다시 렌더링하고 업데이트한다. 이로써 불필요한 리렌더링을 방지하고 성능을 최적화할 수 있다.
배열 인덱스를 key로 사용하는 것의 문제점
배열의 인덱스를 key로 사용하는 것은 가능하지만, 항목의 순서가 바뀌거나 항목이 추가/삭제될 때 문제를 일으킬 수 있다. 이 경우, React는 각 항목을 정확하게 식별하지 못해 전체 리스트를 다시 렌더링하려 할 수 있다. 따라서 고유한 값을 key로 사용하는 것이 좋다.
key와 컴포넌트 상태 업데이트
key는 컴포넌트의 상태를 올바르게 관리하는 데도 중요한 역할을 힌다. 특히 상태를 가진 복잡한 컴포넌트에서 key가 없으면, React는 상태를 올바르게 갱신하지 못할 수 있다. 고유한 key를 제공하면 React가 상태를 정확하게 추적하고 업데이트할 수 있다.
리스트 아이템 변경 시 렌더링 최적화
예를 들어, 리스트에서 항목을 삭제할 때 key를 사용하면 React는 해당 항목만 효율적으로 제거하고 나머지 항목은 변경 없이 유지할 수 있다. 리스트가 커질수록 이러한 최적화는 성능 차이를 크게 만든다.
// 항목 삭제 최적화 예시
const TodoList = ({ todos, onDelete }) => {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.content}
<button onClick={() => onDelete(todo.id)}>삭제</button>
</li>
))}
</ul>
);
};