TL:DR
<>...</>에key를 전달해도react/jsx-key에러는 발생한다.- 대신
Fragment를 명시적으로 사용해야 한다.
발견
평소 React.Fragment의 축약형 문법인 <>...</>를 주로 사용한다.
배열의 항목을 렌더링 할 때 가장 부모 element에 key 프로퍼티를 전달해야 하는데 <></>에 key를 전달했는데도 개발자 도구에서 warning이 뜨고 있었다.
(추가로 eslint 에러에도 <></>에 key를 넘기던 넘기지 않던 에러가 발생하지 않았다! 오호!)
살펴보니 반복문에서 key를 넘기려면 일반 JSX 요소 구문을 사용해야 한단다. <></>에는 key를 넘겨도 적용이 안 되나 보다.
지금까지 몰랐던 걸 보니 신기하게도 가장 바깥 요소로 <></>를 쓴 일이 없었던 거 같다.
해결
공식 문서에도 나와 있듯이 <></> 대신 Fragment를 명시적으로 사용하면 된다!
{list.map((item, index) => (
<Fragment key={index}>
<div>...</div>
<div>...</div>
</Fragment>
)}