[React] Lists and Key

React에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map()을 사용합니다.

아래는 peoples라는 배열의 전체 요소를 <li>...</li>로 렌더링 하는 예제입니다.

import React from 'react'
const Test = () => {
  const peoples  = [
  	{id:0, name: 'Lily', age: 14},
  	{id:1, name: 'Sophia', age: 15},
  	{id:2, name: 'Isabella', age: 11},
  	{id:3, name: 'Zoe', age: 19}
  ];
  
  const listItems = peoples.map(people =>
     <li>{people.name}</li>
  )
  return <ul>{listItems}</ul>
}
export default Test

위 코드를 실행하면 아래와 같은 경고문을 볼 수 있습니다.

키 누락에 관한 경고

 

React 배열에서 Key가  왜 필요할까?

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.  - React 공식 홈페이지

React는 고유한 key값을 넘겨주었을 시 변경사항이 있는 부분만 찾아서 리렌더링 합니다.

React는 업데이트시 Virtual DOM에서 수정 후 모든 수정이 끝나면 Real DOM에 단 한 번 렌더링합니다.

이 과정을 재조정이라고 합니다. 재조정 리액트 공식 문서 참고

 

결론적으로 key 값이 필요한 이유는 요소의 변화를 알아내어 변경된 부분만 리렌더링하기 위해서 입니다.

 

 

요소가 추가 되었을 때

Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다. - React 공식 홈페이지

Key값으로는 고유성을 가진 id를 주로 사용합니다.

  // key에 ID 값 추가
   const listItems = peoples.map(people =>
     <li key={people.id}>{people.name}</li>
  )

배열에 맨 앞에  새로운 요소를 추가합니다.

Virtual DOM에서 수정을 거칠 때 두 개의 DOM(Vitual DOM, Real DOM)을 비교합니다.

기존 배열 요소 중 key : 0의 post의 값과 새로운 요소 key : 0의 post의 값을 비교했을 때 변화가 없으면 리렌더링을 하지 않습니다.

나머지 키 값 1~3도 마찬가지로 새로 추가된 요소만 렌더링을 실시합니다.

 

Key값으로  map의 index를 사용하였을 때 문제점

  // key에 index 값 추가
   const listItems = peoples.map((people,idx) =>
     <li key={idx}>{people.name}</li>
  )

배열에 맨 앞에  새로운 요소를 추가합니다.

리액트의 입장에서는 기존 Key와 value가 완전히 바뀌었다고 판단합니다.

결국 전부 리렌더링 실시하여 리액트의 장점을 살리지 못합니다.

 

위와 같이 key값에 index 사용은 최대한 지양해야 하지만 사용해야 할 경우

아래 세 가지 조건을 만족하면 index를 키로 사용하여도 됩니다.

1. 정적이고 변경되지 않는 경우 (배열의 각 요소가 수정, 추가, 삭제등의 기능이 없는 단순 렌더링 담당)
2. 정렬이나 필터 기능이 없는 경우
3. ID로 쓸만한 값이 없는 경우

 

결론

1. 배열 요소를 map을 사용하여 렌더링 할 시 key라는 prop이 필요하다.

2. Key값은 고유성을 부여해야 한다.

3. key로 index를 사용하는 것은 최후의 수단, 되도록 지양해야 한다.

 

 

참고 사이트

https://blog.woolta.com/categories/1/posts/210

React 에서 배열컴포넌트 사용시 key 에 배열의 index는 가급적 사용하지 말자.!!

https://ko.reactjs.org/docs/reconciliation.html

재조정 (Reconciliation) – React