useInput.js 훅스 문제

제가 따로 제로초님의 강의를 참고해 다른 웹을 실습겸 개발하는데 문제가 있어 질문드립니다. 저는 useInput 훅스를 사용하는 부분에서 문제가 있습니다. 제로초님의 useInput.js파일을(chaper 3) 똑같이 사용하였습니다. PostForm과 비슷한 DataForm을 생성하였는데 아래는 DataForm의 일부 입니다. 여기서 문제는 onChange 부분으로 setTitle(e.target.value)로 값을 넘기면 useInput.js파일에서

TypeError: Cannot read property 'value' of undefined

에러를 보입니다. 하지만 setTitle(e)로 넘기면 문제가 발생하지 않습니다. 즉 useInput.js 파일의

const handler = useCallback((e) => {
setter(e.target.value);
}, []);

부분에서 e가 object의 형태가 아닌 그냥 value의 값을 받는다는 것입니다. 저는 DataForm과 PostForm의 형태가 비슷하다고 생각되는데 이런 일이 일어나는 이유가 궁금합니다. 이로 인해

setTitle('');
setContent('');

도 사용하지를 못합니다. 아래는 PostForm.js의 일부분 입니다.

const DataForm = () => {
const [title, setTitle] = useInput('');
const [content, setContent] = useInput('');
const onChangeTitle = useCallback((e) => {
setTitle(e.target.value);
}, []);
const onChangeContent = useCallback((e) => {
setContent(e.target.value);
}, []);

return (
<Form onFinish={onSubmitForm}>
<Form.Item
value={title}
onChange={onChangeTitle}
>
<Input />
</Form.Item>
<Form.Item
value={content}
onChange={onChangeContent}
placeholder="description"
>
<Input.TextArea />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};

인프런 커뮤니티 질문&답변