React에서 map(배열)의 index를 key 값으로 하면 안되는 이유

Key의 역할과 중요성

React에서는 컴포넌트 리스트를 렌더링할 때 각 요소에 고유한 key를 지정해야 합니다.

key는 React가 각 컴포넌트를 구별하고 추적하는 데 사용되며, 업데이트 시 효율적으로 DOM을 업데이트하는 데에 중요한 역할을 합니다.

key가 없거나 중복된 key를 사용하면 React가 잘못된 컴포넌트를 업데이트하거나 불필요한 렌더링을 발생시킬 수 있습니다.

 

 

배열의 index를 key로 사용하는 문제점

예를 들어 다음과 같은 과일 배열이 있습니다.

const fruits = ['apple', 'banana', 'orange'];

 

이 배열을 컴포넌트로 렌더링하고 index를 key로 사용하면

const fruitList = fruits.map((fruit, index) => <Fruit key={index} name={fruit} />);

 

다음과 같이 배열의 순서를 업데이트를 시켜봅시다.

const updatedFruits = ['banana', 'apple', 'orange'];

 

React는 UI를 업데이트하기 위해 조정 과정을 거치면서, fruitList와 새로운 updatedFruits 배열을 비교합니다.

 

key가 index로 설정되었기 때문에, React는 updatedFruits의 첫 번째 항목이 'banana' (인덱스 0), 두 번째 항목이 'apple' (인덱스 1), 세 번째 항목이 'orange' (인덱스 2)라고 인식합니다.

 

React는 기존의 'apple' (인덱스 1)를 삭제하고 새로운 'apple' 을 리스트의 끝에 추가하게 됩니다. 마찬가지로 기존의 'orange'(인덱스 2)를 삭제하고 새로운 'orange'를 리스트의 끝에 추가합니다. 

 

하지만 사실은 updatedFruits 배열에서는 'banana'와 'apple'의 순서가 바뀌었습니다. key가 index로 설정되었기 때문에 React는 컴포넌트들의 순서가 바뀌지 않은 것으로 오해하게 됩니다. 이렇게 불필요한 컴포넌트 삭제와 추가가 발생하면서 성능 문제가 발생할 수 있습니다.

결과적으로 React는 기존의 컴포넌트들을 새로운 컴포넌트로 인식합니다.

 

 

그렇다면 key를 적절하게 사용하는 법은?

성능의 문제를 피하기 위해서 key는 고유하게 유지하는 것이 중요합니다.

 

데이터의 고유 식별자를 사용하는 것이 가장 좋은 방법인데, 예를 들어, 인덱스 값이 겹치지 않도록 새로 생성하거나 업데이트 할 때 key값을 증가시키는 방법이 있습니다.

또는, 데이터베이스에서 사용하는 고유 ID를 사용하는 방법이 있습니다.