React - Warning : Each child in a list should have a unique "key" prop 해결 방법

리액트를 사용하다보면 이 경고를 많이 보았을 것이다.

Warning : Each child in a list should have a unique "key" prop

key를 할당해주지 않아서 생긴 경고로 map을 사용할 때 추후 수정이나 삭제를 할 때 어떤 요소를 의미하는지 컴퓨터가 알기 위해 고유한 값으로 key를 할당해주어야 한다.

❓ 문제

하지만 아래 코드처럼 key를 부여했는데도 경고창이 사라지지 않는 경우가 있다.

{titles.map((title) => (
  <div>
    <li key={title.id}>
      {title.name}
    </li>
    <button>
      <FaTrashAlt />
    </button>
  </div>
))}

key 값이 상위 태그보다 아래 태그에 할당될 경우 key 값이 제대로 인식되지 않아 key값을 부여해도 경고창이 사라지지 않을 수 있다.

💡 해결

이럴 경우 key 값을 상위 태그에 할당해주면 된다.

{titles.map((title) => (
  <div key={title.id}>
    <li>
      {title.name}
    </li>
    <button>
      <FaTrashAlt />
    </button>
  </div>
))}