CHOI BOO 블로그

[React] Typescript useInput hooks

2020.10.06
React
Typescript
hooks
// hooks/useInput.ts import { useState, useCallback, ChangeEvent } from 'react'; type onChangeType = (e: ChangeEvent<HTMLInputElement>) => void; const useInput = (initValue = '') => { const [value, setValue] = useState(initValue); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler, setValue] as [string, onChangeType, typeof setValue]; }; export default useInput; // pages/login.tsx import useInput from '../hooks/useInput'; const logIn = () => { const [Email, onChangeEmail, setEmail] = useInput(''); return ( <Input name='email' id='email' size='large' placeholder='이메일' type='id' value={Email} onChange={onChangeEmail} /> ); }; export default logIn;
참고 Link: [Stackoverflow Go][link]
© CHOI BOO 2021