Key props

Key는 React가 어떤 특정 항목을 변경, 삭제를 할지 구분할 수 있도록 해준다.

const users = [
  {
    id: 1,
    username: '김종진',
  },
  {
    id: 2,
    username: '김종엽',
  },
  {
    id: 3,
    username: '김종국',
  }
];

해당 코드를 컴포넌트로 렌더링을 하려고 할 때
배열 메소드중 빛의 메소드.. map을 사용한다.

return (
  <div>
    {users.map((user) => (
      <User user={user.username} />
    ))}
  </div>
)

해당 코드로 렌더링을 해주면 user에는 각각의 이름들을 반환해준다.
하지만 이 경우에는 key 에러가 나온다.

이는 Key라고하는 props를 부여해주면 해결된다.

return (
  <div>
    {users.map((user) => (
      <User key={user.id}
      user={user.username} />
    ))}
  </div>
)

이렇게 key를 넣어주면 된다. key 값은 고유한 값을 부여해줘야 한다.

Key 값 할당에는 2가지 방법이 있다.

1. 각 항목별로 고유하게 식별할 수 있는 id값을 부여

const todoItems = todos.map((todo) => 
  <li key={todo.id}>
    {todo.text}
  </li>
);

2. key에 index 값을 부여 but 권장하지 않는다.

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

항목의 순서가 바뀔수 있는 경우에는 key에 index 사용은 좋지 않다.
WHY?

데이터가 변경될때마다 리렌더링이 되는데 map의 index가 0번째 부터 다시 맵핑되어 이전에 삭제된 항목 자리에도 index가 부여될 수 있다.

이로 인해 성능 저하 및 컴포넌트의 state 관련 문제가 발생 할 수 있기 때문이다.
가급적 배열의 요소가 절대불변이 경우에만 사용하도록 한다.

추가 업데이트

Fragment tag Key 적용

map 함수는 사용될 요소의 최상위 요소에 key 값을 부여해야한다

그런데 아래와 같은 코드는 최상위 코드가 Fragment tag이다.

{bannerList.type === 50 &&
   list.map((icon) => (
    <>
      <IconNo1 icon={icon}/>
      {index == list.length - 1 && isShowMoreBtn && (
        <IsMoreBtn
         moreIcon={moreIcon}
         onHandleMoreBtn={onHandleMoreBtn}
         />
       )}
    </>
))}

그럼 이 경우에는 Key 값을 어떻게 부여할 수 있을까?

바로 <React.Fragment></React.Fragment> 형식으로 사용 가능하다.

{bannerList.type === 50 &&
   list.map((icon) => (
    <React.Fragment key={icon.id}>
      <IconNo1 icon={icon} index={index} />
      {index == list.length - 1 && isShowMoreBtn && (
        <IsMoreBtn
         moreIcon={moreIcon}
         onHandleMoreBtn={onHandleMoreBtn}
         />
       )}
    </React.Fragment>
))}