[Typescript] React props key error

Typescript와 React를 통해 간단한 ToDo 앱을 만드는데 props를 전달하는 과정에서 다음과 같은 에러가 발생했다. 

react-jsx-dev-runtime.development.js:87 Warning: ToDoItem: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)

children component에게 props로 key를 전달해주어야 했는데 다음과 같은 에러가 발생했다. key를 통해 todoItem 컴포넌트에서 아이템을 업데이트, 삭제하는 콜백을 key값을 통해 전달해주었는데 undefined가 나오게 되었다. 분명 전달했는데 중간에 누가 뺐긴 생각이 들정도였다. 

 

The key prop has a special meaning in React

(stack overflow를 통해 원인을 알고나서 리엑트부터 다시 공부해야 하나 생각이 들었다)

리엑트에서 key는 특별한 의미를 가진다. key는 chidren에세 전달되지 않고 리엑트가 더 collection을 잘 할 수 있도록 도와준다. 그래서 각 아이템의 key 값으로 전달한 것이 undefined로 전달안해준 것으로 에러가 발생한 것이었다. 전달해야 하는 값을 key대신 id라는 변수명으로 변경하니 에러도 해결되고 update와 delete가 정상적으로 작동했다.