[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 오류를 해결해보자!

 

 

 

 1. 아래와 같이 오류가 떴는데, 이는 props를 map할때 생기는 오류이다. 

 

 

 

 

 2. 해결방법: 최상위 태그에 key={el.id} 를 추가한다. (el은 요소를 뜻함) 

 

아래 예시에서는 최상위 태그에 key={it.id}를 추가하였다.

*참고) 만약 map((item)=> 이런식이라면 key={item.id}가 되는 것임

const DiaryList = ({ diaryList }) => {
  console.log(diaryList) //
  return (
  <div className="DiaryList">
   <h2>일기 리스트</h2>
   <h4>{diaryList.length}개의 일기가 있습니다.</h4> 
    <div>
    {diaryList.map((it) => ( 
     <div key={it.id}> // unique "key" prop 에러 해결 (최상위 태그에 적기)
      <div>작성자: {it.author}</div>
      <div>일기: {it.content}</div>
      <div>감정: {it.emotion}</div>
      <div>작성 시간(ms): {it.created_date}</div>
     </div>
    ))}
  </div>
 </div>
  );
  }


DiaryList.defaultProps={
diaryList:[] 
}

  
  export default DiaryList;

 

 

 

 3. key 값이 무엇인가? 

 

key는 element 리스트를 만들 때 포함해야 하는 특수한 문자열이다.
key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는데에 도움을 준다.

 

 

 

 4. key가 필요한 이유 

 

지금 구현한 기능은 단순히 map을 통한 나열이지만,

이 key값이 없으면, 추후에 댓글 수정, 삭제 등을 할 때에 어떤 요소를 의미하는지를 컴퓨터가 확인하기 어렵기 때문에 고유의 key 값을 주는 것이 중요하다. 

 

 

 

 5. index가 아닌 id를 사용하는 이유 

 

 index로 key값을 부여하였을 때에는 고정된 값이 아니기 때문에 추가 기능이 구현될 때 문제가 발생할 수 있다. (데이터 내에서 배열이 많아질 경우에도 위험의 소지가 있음)

따라서 다른 곳에서 데이터를 받아 올때에는 객체 내의 id값을 key값으로 주는 것이 일반적이다.