[React] React에서 key 값은 왜 필요할까? 🔑

오늘은 제가 React에서 배열에 map() 함수로 자식을 처리할 때
각 요소마다 key 값을 넣어야 하는 것에 대해서 설명드리겠습니다

최근에 저는 친구가 개발하는 것을 도와주다 친구가 key 값을 왜 주어야 하는지 질문을 하였는데
좋은 답변을 해주지 못한 것 같아서 이렇게 글로 정리하게 되었습니다!

---

❓ 왜 그럴까?

" Warning: Each child in a list should have a unique "key" prop "
( 경고: 리스트의 각 자식은 고유한 "key" prop을 가져야 합니다. )

 

React에서 자식 요소에 key 값을 주지 않으면 이러한 오류가 뜨는 것을 볼 수 있습니다

왜 키 값이 필요할까요?

 

공식 문서를 보면 

• React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것에 도움을 줍니다
• 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야합니다

위 글로 보아 key 값은 값이 변하지 않는 고유한 값을 가진 식별자 역할을 한다고 이해할 수 있습니다

---

 🎯 예시 코드

{devices && devices.length > 0  ? (
    devices.map((device) => (
        <Device key={device.id} />
    ))
) : (
    <p>디바이스가 없습니다.</p>
)}

이 코드에서 저는 devices 배열이 존재하고 빈 배열이 아닐 때
map으로 Device 컴포넌트를 key 값에 device id를 줘서 고유한 key 값을 가지게 해주었습니다

저렇게 key 값을 주면 device를 삭제, 수정을 할 때 key을 이용하여 삭제할 수 있습니다

---

✨ 글을 마치며 

오늘은 React에서 key 값이 필요한 이유에 대해서 다뤄보았는데
확실하게 다음에는 더 잘 설명해줄 수 있을 것 같아 정말 좋았습니다 

글을 읽어주셔서 감사합니다