자바스크립트 key props 사용 이유

 

 

 

React에서 key prop은 컴포넌트 목록을 렌더링할 때 각 요소를 고유하게 식별하기 위해 사용된다

이 고유 식별자는 React가 DOM 변경을 효율적으로 관리하고 최적화하는 데 중요한 역할을 한다

 

key props의 주요 사용 이유:

1. 성능 최적화
   1. React는 컴포넌트의 상태를 관리하고 UI를 업데이트할 때 가상 DOM을 사용한다
   2. 리스트의 요소에 key를 제공하면, React는 이전과 새로운 요소들을 효율적으로 비교하여 필요한 최소한의 DOM 변경만을 수행할 수 있다
   3. 이는 특히 대량의 데이터를 다룰 때 렌더링 성능을 크게 향상시킨다
2. 요소 재사용
   1. key가 없을 경우, React는 리스트의 요소를 순서대로 비교하며 업데이트를 진행한다
   2. 하지만 key를 통해 각 요소가 고유함을 알고 있으면, React는 요소의 추가, 삭제, 순서 변경과 같은 작업을 훨씬 더 정확하고 효율적으로 처리할 수 있다
   3. 이는 특히 목록의 순서가 바뀌거나 중간에 요소가 추가/삭제될 때 중요하다
3. 컴포넌트 상태의 안정성
   1. key를 사용하면 컴포넌트의 상태가 예측 가능한 방식으로 관리될 수 있다
   2. 예를 들어, 각 항목에 고유 key를 할당함으로써, 리스트의 요소가 재정렬되거나 업데이트될 때 각 요소의 상태가 올바르게 유지된다

 

key의 선택 기준:

• key는 각 요소마다 고유해야 한다
  • 따라서 데이터의 고유한 ID, 인덱스 등을 key로 사용할 수 있다
• 배열의 인덱스를 key로 사용하는 것은 가능하지만, 요소의 추가, 삭제, 순서 변경이 빈번히 일어나는 리스트에서는 성능 저하나 상태 관리 문제를 일으킬 수 있으므로 권장되지 않는다
• 데이터의 고유 ID가 가장 안정적인 key 값이 된다

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

 

이처럼 key prop을 적절히 사용함으로써,

애플리케이션의 성능을 최적화하고,

데이터 변경에 따른 UI 업데이트를 효과적으로 관리할 수 있다