useInput.js 훅스 문제

Question

제가 따로 제로초님의 강의를 참고해 다른 웹을 실습겸 개발하는데 문제가 있어 질문드립니다. 저는 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 value = { content } onChange = { onChangeContent } placeholder = "description" > < Input.TextArea /> < Form.Item > < Button type = "primary" htmlType = "submit" > Submit ); };

제로초(조현영) · Answer

기본적으로 input이나 textarea는 onChange 이벤트 발생 시 event 객체를 매개변수로 넣어줍니다. 그래서 event.target.value같은 것을 사용할 수 있고요. 그런데 다른 라이브러리의 컴포넌트는 onChange 이벤트가 발생할 때 event 객체 대신 다른 걸 넘겨줄 수도 있습니다. 커스텀 컴포넌트이므로 동작을 마음대로 설정한 것이죠. 어떤 것을 넘겨주는지는 그 라이브러리 컴포넌트의 공식문서를 확인해보셔야 합니다. 그래서 useInput을 그대로 재사용하면 에러가 나게 됩니다.