React

React Key

React Key

React Key란?

React에서 Key는 컴포넌트 배열을 렌더링할 때 각 요소를 구별하기 위해 사용되는 중요한 개념이다. 특히 리스트나 배열을 동적으로 렌더링하는 경우, React가 어떤 항목이 변경, 추가 또는 삭제되었는지 식별할 수 있도록 도와준다. 이를 통해 React 애플리케이션의 성능을 최적화하고, 불필요한 렌더링을 방지할 수 있다.

Key의 중요성

  • 성능 최적화: Key를 통해 React는 렌더링 트리에서 어떤 요소가 변경되었는지 빠르게 식별할 수 있다. (가상돔에서 변경된 내용을 구별하고 Diffing 할 때 Key 사용) 이는 불필요한 렌더링을 최소화하고, 애플리케이션의 성능을 향상시킨다.
  • 안정적인 상태 관리: Key를 사용하지 않으면 컴포넌트의 상태 관리가 혼란스러워질 수 있다. 특히 리스트의 항목이 재배치되거나 업데이트될 때, 올바른 요소에 상태가 유지되도록 한다.

Key 사용 방법

리스트나 배열을 렌더링할 때, 각 요소에 고유한 Key prop을 제공해야 한다. 대부분의 경우, 데이터의 고유 ID를 Key로 사용하는 것이 좋다.
const dataList = [{ id: 1, text: 'Hello' }, { id: 2, text: 'World' }];

function App() {
  return (
    <ul>
      {dataList.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

Key 선택 시 주의사항

  • 고유성: Key는 형제 요소 사이에서 고유해야 한다. 전역에서 고유할 필요는 없지만, 리스트 내에서는 각 요소를 명확히 식별할 수 있어야 한다.
  • 일관성: 요소가 재배치되더라도 Key는 변하지 않아야 한다. 이를 통해 React는 요소의 식별자로 Key를 안정적으로 사용할 수 있다.
  • 인덱스 사용 주의:
    • 배열의 인덱스를 Key로 사용하는 것은 권장되지 않는다. 배열이 재배치되는 경우, 인덱스는 변경될 수 있으므로 Key의 목적에 부합하지 않는다.
    • 같은 키 값을 가진 UI 요소들은 다시 랜더링 하지 않고 자리 이동 등의 변화만 갖게 된다.
    • 애니메이션 재적용을 위해 재 렌더링이 필요할 때 Date.now() 등의 유니크한 값을 사용할 수 있다.