ㅎ ㅏ... 나의 한 시간 반...
antd로 Modal 컴포넌트를 사용중인데 얘가 자꾸 list should have a unique key prop 하면서 콘솔창으로 모라모라 해가지고 일단은 흐린 눈을 하고 개발을 하고 있었다...
왜냐면... 당장 화면을 그리는 것이 급했기 때문이다...
지금 너가 문제가 아니야... 이미지가 떠야지 뭘 할 거니깐...
이제 화면은 대충 다 그린 상황이라서 기능테스트를 하면서 개발해야 되는데 콘솔창에 에러메세지가 너무 길게 떠서 콘솔을 보는 것이 매우 불편한 상황이라 드디어 에러와 싸워보려고 했다.
한 400줄 되는 코드 중에 처음에는 Collapse 밑에서 쓰는 Panel에 key가 없다고 뭐라뭐라 하는 줄 알았다.
왜냐면 얘는 원래 여러개가 들어가는 게 맞는 애인데 개발하는 페이지에서는 한 개만 있으면 돼서 하나만 쓰고 key도 그냥 하드코딩으로 '1' 이렇게 박았으니까.
그.러.나.
충격적이게도 얘가 아니었다!
그 부분을 주석처리해도 계속 나오더라고.
그렇게 부분부분을 다 주석치면서 계속 돌려보다가 드디어 발견한 곳...
그곳은 바로... Modal의 footer 부분이었습니다...
<ImageModal
title={<div className="header">이미지 등록</div>}
maskClosable={maskClosable}
open={open}
onOk={onOk}
onCancel={onCancel}
footer={[
// 이 부분에 key가 없어서 에러가 나고 있었다!!!
<div className="footer" key="footer">
<CloseButton className="close-btn" onClick={onCancel}>
닫기
</CloseButton>
<SikdaeButton>저장</SikdaeButton>
</div>
]}
>아니 왜...? 이게 왜...?
아마 footer로 버튼을 여러 개 넣을 때 antd 컴포넌트 내에서 자체적으로 버튼 하나하나를 리스트로 관리하는가보다.
그래서 얘네가 제공한 버튼을 쓰면 당연히 에러가 안 나는데 내가 커스텀으로 만든 버튼을 쓰면 걔는 그냥 버튼이고 리스트 안에 들어가니까 키가 없어서 안 되는 듯...?하다는 것이 추측이며.
그리고 이거 하면서 선배들에게 배웠는데 map으로 돌리는 모든 것들은 그것이 div태그여도 무조건 key가 있어야 한단다.
나는 뭔가 list태그나 ul 이런 태그만 있으면 되는 줄 알았음...
앞으로는 map을 돌려서 화면에 띄울 때 key를 넣어야 하는 점을 꼭 기억해야겠다.
