[Javascript] map()함수로 렌더링할 때 key값으로 index를 쓰면 안되는 이유

1. 개요

React로 프론트엔드 개발을 하다보면 Array타입의 데이터를 Javascript의 .map()함수로 출력해야할 때가 있다.

이 때 컴포넌트에는 key를 지정해줘야 하고, 아래처럼 index를 이용하는 경우가 있는데 이는 좋은 방법이 아니다.

const dataArr = [
  {id : 0, data : "A"},
  {id : 1, data : "B"},
  {id : 2, data : "C"},
  ...
]

{
  dataArr.map((data, idx) => 
    <div key = {idx}>
      ...
    </div>
  )
}

왜 이것이 좋지 않은 방법인지 알아보자!

 

2. key의 역할

React는 효율적인 렌더링, 업데이트를 위해 VirtualDOM을 이용한다.

간단하게 설명하면, 실제 DOM을 변경하기 전, 새로운 VirtualDOM을 만들고 Reconciliation알고리즘을 이용해 이전 VirtualDOM과 비교한 뒤 필요한 변경들을 모아 한번에 DOM을 업데이트하여 성능을 높이는 것이다. (더 자세한 내용은 다음에 다뤄볼 예정이다!)

key는 이 과정에서 동일한 컴포넌트가 여러개 있을 때(.map()함수를 이용하는것 처럼) 각 컴포넌트를 식별하는 역할을 한다.

이러한 key의 역할 때문에 key로 index를 이용하면 문제가 발생할 수 있다.

 

3. key로 index를 사용하면 안되는 이유

.map()함수로 렌더링한 컴포넌트 A, B, C가 있다고 가정해보자.

각 컴포넌트는 index 0, 1, 2를 갖는다. 이 값들을 key로 넣었다면 아래와 같다.

 

이 상황에서 배열(data)의 A와 B의 위치가 바뀌었다고 가정해보자.

그렇다면 개발자는 A컴포넌트와 B컴포넌트의 위치도 아래처럼 바뀔 것으로 기대한다.

 

하지만 이 변경은 적용되지 않을 가능성이 있다.

왜냐하면 Reconciliation알고리즘이 VirtualDOM을 비교할 때 이 컴포넌트의 key(index)는 바뀌지 않았기 때문이다.

 

이 외에도 배열의 변경(요소 추가 / 삭제 / 수정)에도 동일한 문제가 발생할 가능성이 있다.

이런 문제를 예방하기 위해 key로는 반드시 고유값을 사용해야 한다.

 

4. 고유값이 없다면?

만들면 된다.

고유한 id를 만들어주는 라이브러리를 이용하거나 요소의 값을 합쳐(생년월일 + 휴대폰 번호 등)고유한 값을 만들어 이용하면 된다.