[7주차] 위클리 페이퍼 - React에서 배열을 렌더링할 때 key를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명하세요.

Key의 필요성

• 렌더링 과정에서 요소를 식별하는 방법을 제공하며, 배열의 요소가 재정렬되거나 업데이트 될 때 중요
• Key를 통해 React가 어떤 항목이 변경/추가/제거 되었는지 파악할 수 있음
  • 불필요한 요소의 생성과 파괴를 방지, 변경된 요소만을 갱신할 수 있음

Key의 역할

• key는 React의 렌더링 성능 최적화에 크게 기여
  • key를 사용하면 React는 이전 상태와 새로운 상태를 비교하여 변경된 부분만 업데이트
  • DOM 조작을 최소화하여, 성능을 향상 시킬 수 있음

Key 설정 주의사항

1. 고유한 Key 값 사용

   • Key 값이 중복되면, 어떤 요소를 변경했는지 판단할 수 없어, 의도치 않은 동작이 발생할 수 있음

2. 인덱스 값 Key 사용 금지

   • 인덱스 값은 변할 수 있는 값이므로, 1번 규칙에 위배 되는 결과를 초래함

   • 단, 리스트나 배열의 변동이 없는 경우 인덱스를 Key로 사용할 수 있음

       // 예외 상황: 리스트가 정적일 때 인덱스를 key로 사용
       const staticItems = ['Item1', 'Item2', 'Item3'];
       const listItems = staticItems.map((item, index) => <li key={index}>{item}</li>);
     

3. 안정적인 고유 값 사용

   • Key는 고유 식별자를 사용하는 것이 좋음

참고 자료

• https://www.codeit.kr/topics/fs-paper3/lessons/8638?topicVersion=1&lessonVersion=1
• React 공식 문서 - Lists and Keys
• React 공식 문서 - Reconciliation