[React] 배열 렌더링과 key

 

들어가며

React로 애플리케이션을 개발할 때, 배열 데이터를 화면에 렌더링하는 것은 매우 일반적인 작업입니다. 이 과정에서 `key`는 React의 성능 최적화와 UI의 안정성을 유지하는 데 중요한 역할을 합니다. 이번에는 key의 개념, 사용법 그리고 관련된 주요 개념들을 정리해보겠습니다.

 

요약

React에서 key는 배열 렌더링 시 필수적인 요소로, 성능 최적화와 UI의 안정성을 유지하는 데 중요한 역할을 합니다. 올바른 key를 설정하면 효율적인 DOM 조작이 가능하며, 유지보수성과 가독성도 향상됩니다. key를 사용할 때는 항상 고유한 값을 선택하고, 배열의 index는 피하는 것이 좋습니다. 이를 통해 더욱 안정적이고 성능 좋은 React 애플리케이션을 개발할 수 있습니다.

 

배열 렌더링과 key

key란 무엇인가?

React에서 `key`는 배열로 렌더링되는 요소들 각각을 고유하게 식별하기 위한 속성입니다. React는 이를 통해 DOM 업데이트 시 어떤 항목이 변경, 추가, 삭제되었는지 효율적으로 추적할 수 있습니다. 고유한 key가 없다면, React는 불필요한 DOM 조작을 수행하거나 잘못된 요소를 업데이트할 가능성이 있습니다.

 

주요 역할:

• React의 diffing 알고리즘 최적화
• DOM 업데이트 최소화
• 안정적이고 예측 가능한 UI 유지

 

key를 사용하는 이유

• 성능 최적화
  • React는 key를 기준으로 이전 상태와 새로운 상태를 비교하여 변경 사항만 DOM에 반영합니다.
• UI 안정성
  • key가 없거나 고유하지 않을 경우, React는 요소를 잘못 재사용할 수 있습니다. 이는 사용자가 예상치 못한 UI를 경험하게 만듭니다.
• React 경고 방지
  • 고유한 key를 설정하지 않으면 콘솔에 경고가 출력됩니다.
  • `Each child in a list should have a unique "key" prop.`

 

key에 적합한 값 선택하기

key로 사용할 값은 각 항목의 고유성을 보장할 수 있어야 합니다. 다음은 적절한 값과 부적절한 값의 예입니다:

• 추천
  • 데이터베이스의 고유 ID
  • 고유한 문자열 값
• 비추천
  • 배열의 `index` (순서가 바뀌거나 요소가 추가/삭제되면 문제가 발생)
  • 임의로 생성된 값(항상 동일한 값을 보장할 수 없기 때문)

 

key를 배열의 index로 사용할 때의 문제점

배열의 index를 key로 사용하면 다음과 같은 문제가 발생할 수 있습니다:

• 재사용 문제
  • React는 요소를 잘못 재사용하여, UI가 의도와 다르게 업데이트 될 수 있습니다.
• 성능 저하
  • 배열의 순서가 변경되면, 모든 요소가 다시 렌더링됩니다.
• UI 버그
  • 애니메이션이 적용된 경우, 요소가 잘못된 위치에서 렌더링되거나 부자연스러운 전환이 발생할 수 있습니다.

 

key의 동작 원리

React는 key를 기준으로 각 요소의 'identity'를 파악합니다. 같은 key를 가진 요소는 동일한 것으로 간주하며, 다음과 같이 작동합니다.

• 추가된 요소 : 새 key가 발견되면, 해당 요소를 새로 생성합니다.
• 삭제된 요소 : 이전 렌더링에서 존재했지만, 새로운 렌더링에서 사라진 key는 삭제합니다.
• 변경된 요소 : 같은 key를 가진 요소는 업데이트됩니다.

 

key와 관련된 성능 최적화 사례

React는 key를 활용하여 "diffing 알고리즘"을 실행합니다. 아래는 key를 올바르게 사용하여 성능을 최적화한 사례입니다.

사용자 목록 렌더링

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

return (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

이 경우, 각 사용자는 고유한 `id`를 key로 사용하므로 순서 변경이나 요소 추가/삭제가 발생해도 성능과 UI 안정성이 유지됩니다.

잘못된 key 사용 예시

return (
  <ul>
    {users.map((user, index) => (
      <li key={index}>{user.name}</li>
    ))}
  </ul>
);

배열의 순서가 변경되거나 사용자가 추가/삭제할 경우, 잘못된 데이터가 렌더링될 수 있습니다.