map 함수 적용시 key props를 부여하는 이유

리엑트에서 키 값의 용도

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

사용 권장

Key는 일반적으로 문자열을 사용하는 것이 좋고 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있어야 한다. 대부분의 경우 데이터의 id를 key로 사용합니다.

this.props.comments.map(comment => (
    <CommentItem key={comment.id.toString()} comment={comment} />
));

NOTE: id를 셋팅할 때 이전에 있던 리스트들의 id들과 중복될 수 있다.

이 문제에 대한 한가지 해결방법은 전역 인덱스를 설정하여 다른 id를 부여하는 것이다.

let commentCounter = 1;
const addcomment = (text) => {
  completed: false,
  id: commentCounter++,
  text
}

사용 추천

Production solution을 사용하는 것이다. 예를 들어 nanoid와 uuid가 좋은 예시일 것이다.

nanoid

import { nanoid } from 'nanoid';
const createNewTodo = (text) => ({
  completed: false,
  id: nanoid(),
  text
}

uuid

import {v4 as uuid} from "uuid";
const createNewTodo = (text) => ({
  completed: false,
  id: uuid(),
  text
}

Key 사용 예시

웨스타그램 댓글 기능 구현할 때 사용한 코드이다.

userComment: [
    {
        id: 1,
        comment: "Nice work!"
    },
    {
        id: 2,
        comment: "Hi there"
    },
]

위의 배열을 바탕으로 .map()를 활용하여 배열 안 요소의 숫자만큼 댓글 컴포넌트들을 만든다. 이때 주어지는 key 값은 문자열로 변환된 댓글 id이다.

return this.props.comments.map(comment => (
      <CommentItem key={comment.id.toString()} comment={comment} />
    ));

Resource