React에서 map 메서드 쓸 때, key prop을 사용해야 하는 이유?

프론트엔드 개발을 할 때, UI에 반복되는 구조를 하드코딩 하지 않고 Map 메서드를 사용해서 구현하는 경우가 매우 많다.

배열이나 객체로 된 데이터를 서버 혹은 상수데이터로 받아와서 동일한 UI 구조에서 데이터만 다르게 표시되도록 구현하는데

이 과정에서 map 메서드를 사용하게 된다.

 

이 때, 가장 부모요소에 key prop을 기입하게 되는데, 왜 이 key prop이 필요한 걸까?

 

Problem

 

{SampleData.map((el)=>{ 
  return ( 
    <div>
      <span>{el.title}</span>
    </div>
)
})}

 

위와 같은 형태로 UI를 구성했다고 가정해 보자.

현재 SampleData라는 데이터를 map 메서드를 이용해 주고, 데이터 안에 있는 요소 중 title이라는 데이터를 화면에 그려주고 있다.

이러한 상태에서 개발 서버를 열어 확인해 보면 다음과 같은 에러 메세지를 확인할 수 있다.

 

해당 메세지는 개발자도구 console 탭에서 확인할 수 있는데, 실제 화면에는 영향을 주는 에러는 아니었지만

빨간 메세지를 보면 해결해야하는게 개발자의 숙명이 아닌가..!

왜 이런 메세지가 나타나는지 알아보도록 하겠다.

 

'Key' Prop

 

key prop은 각각의 요소에 고유한 식별자를 제공한다. 즉 각 요소를 식별할 수 있게 해주는 prop이라는 말이다.

이게 왜 중요하냐면, React는 이 key를 이용해서 요소의 변경 상태를 효율적으로 추적하고 관리할 수 있기 때문이다.

 

React의 특징 중 가상돔 (Virtual DOM)이 있는데 key prop을 사용하면 React의 가상돔은

각 요소의 key를 비교해서 이전 상태와 현재 상태를 매핑하고 변경된 요소만 업데이트하게 된다.

이러한 과정을 통해 불필요한 DOM 조작을 줄이고, 변경된 요소만 업데이트를 진행해 성능 개선에도 도움이 된다.

 

그렇다면 왜 key prop을 사용해야하는지 알았으니 어떻게 사용하는지 한번 알아보자

 

적용하기

 

 

React Key prop을 사용할 때는, return 다음 나오는 가장 최상위 부모 요소에 적용해 줄 수 있다.

key 프로퍼티에 해당 요소를 식별할 수 있도록 유니크한 값을 넣어주면 된다.

 

생각보다 적용 방법은 간단하지만 여기에는 주의해야할 점이 있다.

 

 

주의 사항

 

map 메서드는 배열을 순회하면서 주어진 함수를 호출한 결과를 담은 새로운 배열을 반환하는 메서드다.

배열을 순회한다는 점에서 각 요소마다 인덱스 값이 자동으로 부여가 된다는 것인데, key에 해당 값을 사용하는 것은 지양해야한다.

 

출처 : https://ko.legacy.reactjs.org/docs/lists-and-keys.html#keys

실제 공식문서에도 이 점에 대해서 정리해 놓은 부분이 있는데,

안정적인 ID가 없을 때 최후의 수단으로 항목의 인덱스를 Key로 사용할 수 있다고 작성되어있다.

 

예시로 항목의 순서가 바뀔 수 있는 경우에 key prop에 인덱스를 사용하게 되면

성능 저하나 컴포넌트의 state와 관련된 문제가 발생할 수 있다고 한다.

 

우리가 ToDo List를 만든다라고 가정하면, 할 일 리스트를 작성하거나

각 리스트의 순서를 변경하거나 수정하거나 삭제하는 경우가 있는데,

이러한 경우 각 요소의 key를 인덱스 값으로 설정하게 되면 다양한 기능을 수행할 때

의도하지 않은 다른 요소가 삭제 되거나 수정 되는 경우가 발생할 수 있겠고,

이러한 에러를 해결하기 위해서 더 복잡한 로직을 사용해야하는 경우가 발생할 수 있겠다.

 

---

 

레퍼런스

 

- 리액트 공식문서 : key [ 이동 ]

- map 메서드 MDN [ 이동 ]

- index를 key에 사용했을 때 발생하는 부정적 이슈 [ 이동 ]