[React] Each child in a list should have a unique "key" 에러

Each child in a list should have a unique "key" Error 발생

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

 

React 프로젝트를 진행 중에 발생하는 Error입니다. 이는 Chrome의 개발자 도구인 Console에서 확인할 수 있으며 React에서 map 함수를 사용하여 반복문을 사용하는 경우에 발생하는 스크립트 오류입니다.

React에서는 key prop를 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성합니다. React 라이브러리는 이 관계를 이용하여 컴포넌트 렌더링 여부를 결정하기 때문에 불필요한 렌더링을 방지하기 위하여 각 자식 컴포넌트마다 독립적인 Key 값을 넣어줘야 하는데 Key 값이 없는 경우에 발생하는 오류입니다.

 

React의 JSX에서 배열로 map함수를 사용하여 리스트를 생성할때 key prop를 자식 컴포넌트마다 넣어줘야 오류를 해결할 수 있습니다.

 

특히 조심해야하는 경우에는 key값이 Root 컴포넌트에 적용되어야 하는데 Fragment부분이 Root로 map처리되는 경우에도 에러가 발생합니다.

 

//잘못된 코드
{ list.map((item)=>(
     <>
       <div key={item}> Component </div>
     </>
  ))
}

//수정된 코드
{ list.map((item)=>(
	<div key={item}> Component </div>
  ))
}