React key

1. React key란?

React에서 key는 리스트 내 요소들을 식별하기 위한 특별한 속성이다.

React는 key를 사용하여 DOM 업데이트를 효율적으로 처리하고 올바른 컴포넌트 상태를 유지한다.

key는 형제 요소들 사이에서만 고유하면 되며, 전역적으로 고유할 필요는 없다.

 

2. 고유 ID를 key로 사용해야 하는 이유

1) 컴포넌트 식별과 재사용

React는 key를 통해 이전 렌더링과 현재 렌더링 사이에서 어떤 요소가 변경, 추가, 제거되었는지 식별한다.

고유한 key가 있으면 React는 동일한 key를 가진 요소를 재사용하여 불필요한 DOM 조작을 줄일 수 있다.

 

2) 배열 조작 시 문제 방지

인덱스를 key로 사용할 경우, 배열에 항목을 추가하거나 제거하면 동일한 인덱스의 다른 항목이 동일한 key를 갖게 된다.

그렇게되면 예상치 못한 동작과 버그를 일으킬 수 있다.

// 문제 상황: 배열의 첫 번째 항목이 제거됨
const initialItems = [
  { id: 'a', text: 'Apple' },  // index 0
  { id: 'b', text: 'Banana' }, // index 1
  { id: 'c', text: 'Cherry' }  // index 2
];

// 첫 번째 항목 제거 후
const newItems = [
  { id: 'b', text: 'Banana' }, // 이제 index 0
  { id: 'c', text: 'Cherry' }  // 이제 index 1
];

// 인덱스를 key로 사용했다면, React는 실제로 변경된 내용을 이해하지 못함
// ID를 key로 사용하면 올바르게 처리됨

 

3. key를 이용한 컴포넌트 리셋

React에서 key는 컴포넌트를 완전히 리셋하는 방법이다.

일반적으로 props나 상태가 변경되면 컴포넌트는 리렌더링되지만, 인스턴스는 그대로 유지된다.

key가 변경되면 React는 해당 컴포넌트의 이전 인스턴스를 완전히 제거하고 새 인스턴스를 생성한다.

 

ex)

import React, { useState } from 'react';

const Counter = ({ initialCount = 0 }) => {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

function App() {
  const [initialCount, setInitialCount] = useState(0);
  const [key, setKey] = useState(1);

  return (
    <div>
      <input 
        type="number" 
        value={initialCount} 
        onChange={e => setInitialCount(Number(e.target.value))}
      />
      <button onClick={() => setKey(key + 1)}>Reset Counter</button>

      {/* 
        initialCount가 변경되면 Counter는 리렌더링되지만 내부 상태(count)는 유지됨
        key가 변경되면 Counter 컴포넌트가 완전히 새로 생성되어 모든 상태가 리셋됨
      */}
      <Counter key={key} initialCount={initialCount} />
    </div>
  );
}

 

 

1) initialCount props만 변경하면 Counter 컴포넌트는 새 props를 받아 리렌더링되지만, 내부 count 상태는 그대로 유지된다.

2) key가 변경되면 React는 이전 Counter 인스턴스를 버리고 새 인스턴스를 생성하므로 모든 내부 상태가 초기화된다.

 

4. 주의사항

1) 임의의 값이나 난수 사용 주의

렌더링마다 변경되는 값(Math.random() 등)을 key로 사용하면 매번 컴포넌트가 재생성되어 성능 문제가 발생한다.

 

2) key는 안정적이고 예측 가능해야 함

데이터베이스 ID, UUID 등 안정적인 식별자를 사용하는 것이 좋다.

 

3) 형제 요소 간에만 고유하면 됨

서로 다른 배열이나 리스트에서는 동일한 key를 사용해도 문제가 없다.