map() 사용 시 Key로 index를 사용하지 않고 고유한 ID 만들기

 

나는 이때까지 map을 사용해서 리스트를 랜더링 할 때 

보통 데이터에 이미 고유한 ID가 있다면 그 ID를 사용하지만 없는 경우에는 index를 넣는 경우가 있었는데

이는 권장하지 않는 방법이라고 한다. 

 

 

key에 index 값을 넣지 않는 것이 권장되는 이유는

리스트 항목의 순서나 내용이 변경될 때 예상치 못한 렌더링 문제를 일으킬 수 있기 때문이다.

---

1. 항목 순서 변경 시 문제

리스트 항목의 순서가 바뀌면, index 값은 그대로 유지되기 때문에 리액트는 항목 자체가 변경되었음을 인식하지 못한다.

 

이는 결과적으로 불필요하거나 잘못된 렌더링을 유발할 수 있다.

 

예를 들어, 항목이 삽입되거나 삭제될 때, 각 항목의 key가 여전히 같은 index 값을 가지면 리액트는 항목이 그대로 있다고 잘못 판단할 수 있다.

 

예시:

 

const fruits = ['Apple', 'Banana', 'Cherry'];​

 

여기서 항목이 'Apple', 'Banana', 'Cherry' 순으로 있을 때, key로 index를 사용할 경우:

 

fruits.map((fruit, index) => <li key={index}>{fruit}</li>);​

 

만약 'Apple'이 삭제되면 나머지 'Banana'와 'Cherry'는 여전히 각각 1번과 2번 인덱스를 가지게 된다.

 

리액트는 항목이 변경되지 않았다고 인식하고 불필요하게 이전 내용을 그대로 재사용하거나 엉뚱한 위치에 잘못된 내용을 렌더링할 수 있습니다.

 

---

2. 성능 문제

index를 key로 사용하면 항목이 추가, 삭제, 재정렬될 때마다 리액트는 모든 항목을 다시 렌더링할 수 있다. 

이는 성능 저하로 이어질 수 있으며, 특히 많은 데이터가 있는 경우 문제가 심화된다.

고유한 key를 사용하면, 리액트는 바뀐 항목만 효율적으로 업데이트할 수 있다.

 

---

 

3. 사용자 인터랙션 문제

리스트 내에서 폼 요소나 상태를 가진 컴포넌트가 있을 때, index를 key로 사용하면 상태가 잘못된 항목에 할당될 수 있다.

 

리액트는 key를 기준으로 컴포넌트 상태를 관리하는데, index를 사용하면 항목의 순서가 바뀔 때 상태가 엉뚱한 컴포넌트에 연결되는 문제가 발생할 수 있다.

 

 

 

---

결론

 

 

고유한 ID 또는 shortid와 같은 라이브러리를 이용하여 각 리스트 항목에 고유한 key를 부여하는 것이 리액트 렌더링에서 예기치 않은 문제를 방지하고 성능을 최적화하는데 중요한 역할을 합니다.

 

shortid 를 사용한 예시 

yarn add shortid
or
npm i shortid

import React from 'react';
import shortid from 'shortid';

const DataList = () => {
  const dataList = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <ul>
      {dataList.map(item => (
        <li key={shortid.generate()}>{item}</li>
      ))}
    </ul>
  );
};

export default DataList;

 

 

 

---

https://medium.com/sjk5766/react-%EB%B0%B0%EC%97%B4%EC%9D%98-index%EB%A5%BC-key%EB%A1%9C

-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3ce48b3a18fb

[React] 배열의 index를 key로 쓰면 안되는 이유

https://velog.io/@iberis/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-shortid-%EB%9E%9C%EB%8D%A4-id-faker%EB%8D%94%EB%AF%B8%EB%8D%B0%EC%9D%B4%ED%84%B0

[리액트 라이브러리] shortid - 랜덤 id 생성