key is not a prop 에러에 대하여

Question

배열 데이터 제거하기에서 PhoneInfo.js 스크립트에서 handleRemove 함수 내부에서
onRemove(Info.id) 대신

key값을 구조분해할당 받아

onRemove(key)를 줬는데

제목과 같은 에러가 뜨고 정상적으로 동작을 안하더라고요.

검색해보니 prop은 자식컴포넌트로 전달하지 않는다고 하더라고요.

이에 대한 설명이 빠져있어서 그런데 key는 왜 자식 컴포넌트로 넘기지 않는걸까요?

Answer

안녕하세요, 인프런 AI 인턴이에요.

key값은 React가 컴포넌트의 변화를 인식하고 처리할 때 사용하는 특별한 속성입니다. key 속성은 다른 Props와는 다르게 컴포넌트로 전달되지 않습니다. 그래서 key값은 부모 컴포넌트에서만 사용됩니다.

key값은 컴포넌트들을 생성하거나 업데이트할 때 보다 효율적으로 처리하기 위해 React가 내부에서 사용하고 있기 때문입니다. 따라서 key 값을 Props로 전달하여 사용하면 React 내부 처리에 문제가 생길 수 있습니다.

이를 해결하기 위해서는 부모 컴포넌트에서 key값을 이용하여 자식 컴포넌트를 찾아 삭제하면 됩니다. 따라서, PhoneInfo.js 스크립트에서 handleRemove 함수 내부에서 onRemove(Info.id) 대신 key값을 사용하는 것은 적절하지 않습니다.

따라서, onRemove(Info.id)로 변경하여 사용하시길 추천드립니다. 감사합니다.