React에서 key prop은 컴포넌트 목록을 렌더링할 때 각 요소를 고유하게 식별하기 위해 사용된다
이 고유 식별자는 React가 DOM 변경을 효율적으로 관리하고 최적화하는 데 중요한 역할을 한다
key props의 주요 사용 이유:
- 성능 최적화
- React는 컴포넌트의 상태를 관리하고 UI를 업데이트할 때 가상 DOM을 사용한다
- 리스트의 요소에 key를 제공하면, React는 이전과 새로운 요소들을 효율적으로 비교하여 필요한 최소한의 DOM 변경만을 수행할 수 있다
- 이는 특히 대량의 데이터를 다룰 때 렌더링 성능을 크게 향상시킨다
- 요소 재사용
- key가 없을 경우, React는 리스트의 요소를 순서대로 비교하며 업데이트를 진행한다
- 하지만 key를 통해 각 요소가 고유함을 알고 있으면, React는 요소의 추가, 삭제, 순서 변경과 같은 작업을 훨씬 더 정확하고 효율적으로 처리할 수 있다
- 이는 특히 목록의 순서가 바뀌거나 중간에 요소가 추가/삭제될 때 중요하다
- 컴포넌트 상태의 안정성
- key를 사용하면 컴포넌트의 상태가 예측 가능한 방식으로 관리될 수 있다
- 예를 들어, 각 항목에 고유 key를 할당함으로써, 리스트의 요소가 재정렬되거나 업데이트될 때 각 요소의 상태가 올바르게 유지된다
key의 선택 기준:
- key는 각 요소마다 고유해야 한다
- 따라서 데이터의 고유한 ID, 인덱스 등을 key로 사용할 수 있다
- 배열의 인덱스를 key로 사용하는 것은 가능하지만, 요소의 추가, 삭제, 순서 변경이 빈번히 일어나는 리스트에서는 성능 저하나 상태 관리 문제를 일으킬 수 있으므로 권장되지 않는다
- 데이터의 고유 ID가 가장 안정적인 key 값이 된다
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
이처럼 key prop을 적절히 사용함으로써,
애플리케이션의 성능을 최적화하고,
데이터 변경에 따른 UI 업데이트를 효과적으로 관리할 수 있다
'Frontend' 카테고리의 다른 글
리액트 사용하는 이유 (0) | 2024.03.05 |
---|---|
왜 리액트 타입스크립트 사용 (0) | 2024.03.05 |
제어 컴포넌트와 비제어 컴포넌트 (0) | 2024.03.05 |
requestAnimationFrame (0) | 2024.03.05 |
자바스크립트 this (0) | 2024.03.05 |