key is not a prop 에러에 대하여
697
投稿した質問数 1
배열 데이터 제거하기에서 PhoneInfo.js 스크립트에서 handleRemove 함수 내부에서
onRemove(Info.id) 대신
key값을 구조분해할당 받아
onRemove(key)를 줬는데
제목과 같은 에러가 뜨고 정상적으로 동작을 안하더라고요.
검색해보니 prop은 자식컴포넌트로 전달하지 않는다고 하더라고요.
이에 대한 설명이 빠져있어서 그런데 key는 왜 자식 컴포넌트로 넘기지 않는걸까요?
回答 1
0
안녕하세요, 인프런 AI 인턴이에요.
key값은 React가 컴포넌트의 변화를 인식하고 처리할 때 사용하는 특별한 속성입니다. key 속성은 다른 Props와는 다르게 컴포넌트로 전달되지 않습니다. 그래서 key값은 부모 컴포넌트에서만 사용됩니다.
key값은 컴포넌트들을 생성하거나 업데이트할 때 보다 효율적으로 처리하기 위해 React가 내부에서 사용하고 있기 때문입니다. 따라서 key 값을 Props로 전달하여 사용하면 React 내부 처리에 문제가 생길 수 있습니다.
이를 해결하기 위해서는 부모 컴포넌트에서 key값을 이용하여 자식 컴포넌트를 찾아 삭제하면 됩니다. 따라서, PhoneInfo.js 스크립트에서 handleRemove 함수 내부에서 onRemove(Info.id) 대신 key값을 사용하는 것은 적절하지 않습니다.
따라서, onRemove(Info.id)로 변경하여 사용하시길 추천드립니다. 감사합니다.
App.js에서 handleCreate 함수 생성 시 오류
0
463
1
PhoneForem.js 파일에서 [e.target.phone] : e.target.value 해줘야하지 않나요?
0
406
1
firebase에서 db 데이터 값 가져오기 중...
0
532
1
강의 교재 받을 수 있나요?
0
438
0
라이프사이클 관련 질문
0
289
0
onClick = {smoe callback} 은 render 를 다시 호출 하나요?
0
225
0
동영상 하단에 링크가 없어요
0
314
0
var를 사용안한다 하셨는데
0
411
1
수강자료는 어디서 받나요
1
584
1
영상 링크가 변경된 것 같습니다.
10
440
0
계속 보고있지만 구동되는 방향성을 이해못하겠어요 ㅠㅠ.
0
280
0
리액트 virtualDOM 개념과 state 불변성 관련 개념이 어떻게 다른건지 궁금합니다.
0
229
0
npm 을 사용해서 create 하려니까 안되네요
0
262
0
배열안의 데이터 수정하기에서 12:19 화면 부분이 궁금해서 질문드립니다.
0
229
0
계속 PhoneForm.js 파일을 못읽는거같더니
1
267
0
this에 관해서 질문드립니다!!
0
334
1
배열 데이터 렌더링 및 관리파트에서 props로 값 가져올때 질문있습니다!
0
218
0
함수형 컴포넌트는 state를 어떤 식으로 정의하는지 궁금합니다.
0
417
1
ㅇ
0
343
1
import 질문
0
292
2
index.js 파일이 다릅니다
2
224
0
const {변수명} = ? 표현법
1
2862
1
create-react-app 오류 (Cannot find module './encoding/utf8')
0
277
0
shouldComponentUpdate NextProps 와 nextState 질문있습니다.
0
207
0