[ React ] map() 함수로 컴포넌트 출력시 Key 값이 왜 필요한가?

Key 를 왜사용하는지

리액트에서 key는 컴포넌트 배열을 렌더링 했을때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다.
key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 변화를 감지합니다.
만약에 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 감지할 수 있습니다.

key 값을 설정할 때 알아야 할 것들

1. key 값은 언제나 유일해야 합니다
2. 데이터가 가진 고윳값을 key 값으로 설정해야 합니다.
3. 만약 고윳값이 없다면 map에 전달되는 콜백 함수인 index 값을 사용하면 됩니다.(고윳값이 없을 때만 index 값을 사용해야 합니다 index를 key 값으로 사용하면 배열이 변경될 때 효율적으로 리렌더링을 하지 못합니다)

예) 게시판의 게시글 번호, 유저의 유저번호 등.

키값설정

userArray.map(value => 
  <ui key={value.userIdNum}>
    <li>{value.userName}</li>
    <li>{value.userGender}</li>
    <li>{value.userAge}</li>
  </ui>
)

출처 : 리액트를 다루는 기술