Custom hook

lim1313·2021년 11월 12일
0

TILPLUS

목록 보기
40/40
post-custom-banner

form + input 예제

const Input = () => {
  const [value, setValue] = useState('');
  const onChange = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  const [value,2 setValue2] = useState('');
  const onChange2 = useCallback((e) => {
    setValue2(e.target.value);
  }, []);

  return (
    <form>
      <input value={value} onChange={onChange} />
      <input value={value2} onChange={onChange2} /> 
    </form>
  )
}

Custom Hook

const useInput = (initialValue = '') => {
  const [value, setValue] = useState(initialValue);
  const onChange= useCallback((e) => {
    setValue(e.target.value);
  });
  return [value, onChange, setValue];
}

useInput Hook import

const Input = () => {
  const [value, onChange] = useInput('');
  const [value2, onChange2] = useInput('');

  return (
    <form>
      <input value={value} onChange={onChange} />
      <input value={value2} onChange={onChange2} /> 
    </form>
  )
}

참고)
https://www.zerocho.com/category/React/post/5fa2376126d8f300042eece4

profile
start coding
post-custom-banner

0개의 댓글