React에서 index를 key로 사용하면 안 되는 이유

답변 확인

React에서 key는 각 컴포넌트를 고유하게 식별하는 데 사용됩니다. 이는 React가 DOM 업데이트를 최적화하고, 필요한 경우에만 렌더링을 수행할 수 있도록 돕습니다. 하지만 index를 key로 사용하는 것은 몇 가지 문제가 있을 수 있습니다. 아래에서 이를 상세히 설명합니다.

1. 데이터의 순서가 변경될 때 문제 발생

리스트에서 데이터가 추가되거나 삭제되면, React는 index를 기준으로 DOM을 업데이트합니다. 이 과정에서 잘못된 요소가 업데이트되거나, 예기치 않은 동작이 발생할 수 있습니다.

예시

const items = ['Apple', 'Banana', 'Cherry'];
 
function App() {
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

위 코드에서 key로 index를 사용하면, 예를 들어 Banana가 삭제될 경우, React는 아래와 같이 잘못된 매칭을 할 수 있습니다:

React는 index 기준으로 1번과 2번 DOM 노드를 재활용하여, Cherry를 잘못된 위치에 렌더링합니다.

2. 리스트 내부의 상태가 꼬일 가능성

key는 컴포넌트의 상태를 유지하는 데 중요한 역할을 합니다. 하지만 index를 사용하면 데이터가 바뀌었음에도 불구하고 기존 컴포넌트의 상태가 재활용될 수 있습니다.

예시

const [items, setItems] = useState(['A', 'B', 'C']);
 
function App() {
    return (
        <ul>
            {items.map((item, index) => (
                <Input key={index} value={item} />
            ))}
        </ul>
    );
}
 
function Input({ value }) {
    const [text, setText] = useState(value);
 
    return <input value={text} onChange={(e) => setText(e.target.value)} />;
}

만약 리스트 순서가 바뀌면, 각 Input 컴포넌트가 잘못된 데이터를 가질 수 있습니다. 이는 사용자 경험에 큰 영향을 미칠 수 있습니다.

3. 고유하지 않은 key로 인해 발생하는 성능 저하

index는 고유하지 않은 값이므로, React가 변경점을 효율적으로 파악하지 못하고 불필요한 리렌더링이 발생할 수 있습니다. 이는 특히 큰 리스트에서 성능 문제를 야기합니다.

올바른 key 사용 방법

1. 데이터가 고유한 id를 가진 경우 이를 key로 사용합니다.
2. 고유한 값이 없다면, 리스트를 렌더링하는 과정에서 새로운 고유 값을 생성하거나 데이터 구조를 재설계합니다.

예시 (고유한 id 사용)

const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
];
 
function App() {
    return (
        <ul>
            {items.map((item) => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
}

결론

React에서 key는 컴포넌트를 고유하게 식별하는 중요한 역할을 합니다. index를 key로 사용하는 것은 순서 변경, 상태 꼬임, 성능 저하와 같은 문제를 초래할 수 있으므로, 반드시 고유한 값을 사용해야 합니다.