React에서 Key가 필요한 이유

다음과 같이 map을 통해 리스트를 보여주면 문제가 발생한다.

import { Test } from '../../src/test2';
export default function Test2() { constList=['사과','딸기','바나나'];
return ( <>
      {List.map((data) => (
        <Test>{data}</Test>
))} </>
); }

이렇게 콘솔로그에 빨간딱지가 잔뜩 붙어있다.

오류는 uniqui한 key가 필요하다고 말하고 있다.

1. React에서 Key가 필요한 이유

Virtual Dom과 Rendering을 알고 있으면 이를 이해하기 쉽다.

React에서는 데이터의 상태를 메모리에 저장하고 있다가 기존과 바뀐부분만 렌더링하여 화면에 그려준다.

여기서 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만,
Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애준다.

그러기 위해서는 중복되지 않는 고유한 값을 key 값으로 부여해 주어야 한다.

2. map의 index를 key로 사용할 때 발생하는 문제점

React에서는 key가 동일할 경우 동일한 Dom 요소를 보여주기 때문에 아래와 같은 문제가 발생한다.

배열의 index의 경우 기존 0번 인덱스에 있던 요소가 삭제되면,
빈 자리를 다른 요소가 와서 메꿔준다.

여기서 0번 인덱스의 데이터를 삭제하면 React에서 데이터 변경을 감지하여
리렌더링되고 index가 0부터 다시 매핑 되면서 0번 인덱스의 데이터가
1번인덱스에 매핑된다.

이렇게 되면 기존의 배열에서 0번 인덱스를 삭제하였으나 기존 0번 인덱스의
값이 1번 인덱스에 덮어쓰기가 되면서 1번 인덱스의 값이 사라지게 된다.

반대로 추가할 때도 위와 같은 문제가 발생한다.
0번 인덱스에 데이터를 추가하면 React에서 이를 감지하고 리렌더링을 실시한다.
하지만 여기서 배열이 추가되면 기존의 0번 인덱스에는 다른 데이터가 위치하게 되는데 React에서는 오로지 인덱스 값으로만 데이터를 덮어써 보여주기 때문에
새로바뀐 0번인덱스의 위치에 기존 0번인덱스가 있던 데이터를 보여주게되어 문제가 발생한다.

배열에서 데이터가 추가되거나 삭제될 때마다 인덱스에 위치한 값이 바뀐다.
만약 배열의 맨앞에 요소가 추가되면 기존의 0번 인덱스에 위치하던 값이 1번 인덱스로 이사한다.
이때 리액트가 값을 매핑하는 key가 index이면 0 -> 1번 인덱스로 이사한 1번 인덱스의 값을 0번 인덱스에 매핑하게된다.

3. Index를 Key로 주어도 괜찮은 상황

• 정적인 데이터, 계산되지 않고 변경되지 않는 데이터
• map에 있는 모든 데이터가 id가 없을 경우
• 데이터가 재정렬되거나 필터링 되지 않는 경우.

index와 key에 관한 자세한 내용