React의 Key

리액트에서 목록 컴포넌트(ul)에는 각 요소(li)마다 고유 키를 부여해줘야 한다. 이 때, 키 값으로 반복문의 index를 사용하면 콘솔에 오류는 뜨지 않지만 좋은 방법은 아니다.

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별한다. index를 key 값으로 사용한다면 렌더링 할 때마다 목록에 항목이 추가/삭제 또는 필터링되는 경우 index는 달라지므로 고유하다고 할 수 없다.

const App = () => {
  const [userList, setUserList] = useState([]);

  const addUser = (newUser) => {
    setUserList((prevUserList) => [newUser, ...prevUserList]);
  };
  return (
    <div>
      <ul>
        {userList.map((item, index) => (
          <li key={index}>
            {item.username}({item.userage} years old)
          </li>
        ))}
      </ul>
    </div>
  );
};

🐝 참고

[React] 배열의 index를 key로 쓰면 안되는 이유

Index as a key is an anti-pattern