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

💻 작성한 코드

function CommentsHyeri(props) {
  return (
    <>
      {props.comments.map(function (data, index) {
        return (
          <div className="newComments" key={index}>
            <ul className="commentsInput">
              <li className="userName">harryshumjr</li>
              <li className="userTalk">{data}</li>
            </ul>
            <div className="icon">
              <Heart
                width="10"
                height="10"
                />
            </div>
          </div>
        );
      })}
    </>
  );
}

export default CommentsHyeri;

이렇게 작성하니까 'key'가 없다는 오류가 떴다. 그래서 index를 만들어주고 key에 index 값을 적어주니 오류는 사라졌다.

key

Key는 React가 어떤 항목을 변경하거나 추가 또는 삭제할 지 구분하는 것을 돕는다.
Key는 element에 안정한 고유성을 부여하기 위해 배열 내부의 엘리먼트를 지정해야합니다. Key는 다른 항목들 사이에서 고유하게 식별할 수 있는 것을 사용합니다.

올바른 key 사용방법

• map()함수 내부에 element에 key값을 넣어 주는 게 좋다.
• 두개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.

잘못된 사용 예)

function 자식 컴포넌트 (props) {
  const value = props.value;
  return (
    <li key={value.toString()}>
      {value}
    </li>
  );
}

자식 컴포넌트 내부에 사용하면 안됩니다. 부모의 값에서 자식 컴포넌트를 사용할 때 사용해야 합니다.

옳은 예)

function 부모 컴포넌트(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <자식 컴포넌트 key = {number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

주의할 점

리액트는 state에서 변경사항이 있는 부분만 캐치해서 리랜더링 해줍니다.
배열의 key값을 고유하게 넘겨주었을 경우 리액트는 딱 한가지 요소만 리랜더링 해줍니다.

map을 사용하였을 때 index로 키값을 주면 안되는 이유

key: 0,  {id:4,  content:'ya!'},
key: 1,  {id:0,  content:'moya'},
key: 2,  {id:1,  content:'holly'},
key: 3,  {id:2,  content:'monya'},
key: 4,  {id:3, content:'hulkhulk'}

결과적으로 state로 배열을 관리한다면 map을 사용할 때 key로 index를 사용하지 말자.
배열의 처음이나 중간에 새로운 데이터가 들어올 경우 그 부분만을 캐치하지 못하게 된다.
사용하고 싶으면 데이터가 절때 바뀌지 않을 때 권장된다.