[에러] 리액트 에러 - Each child in a list should have a unique "key" prop.

 

원인 : 리액트 JSX에서 map함수를 사용할때 나오는 에러

React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다.

리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다.

불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다.

<ul>
  {["Item1", "Item2", "Item3"].map(item =>
  <li>{item}</li>
  )}
</ul>

 

 

 

 

해결방법 : 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다.

Ex: <div key="uniqueId1" >Item1</div>

<ul>
  {["Item1", "Item2", "Item3"].map(item =>
  <li key="{item}">{item}</li>
  )}
</ul>

{
  글제목.map((a,i)=>{
    return(
   <div className='list' key={i}>
    <div>{글제목[i]}</div>
    <div>5월 5일</div>
   </div>
    )
  })
}

 

 

[출처] https://crong-dev.tistory.com/47