input 요소에 onChange, 이벤트 콜백

import { ChangeEvent, useCallback, useState } from 'react'
import { Title } from '../components'
import { Input } from '../theme/dasiyui'

export default function InputTest() {
  const [value, setValue] = useState<string>('')
  const [checked, setChecked] = useState<boolean>(false)

  const onChangedValue = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value)
    setValue(e.target.value)
  }, [])
//세터함수의 입력 변수가 함수임으로 기존 유지되고있는 값을 매개변수로 세터 함수 호출, 의존성 목록에 원본데이터 안넣어도 됨.
  
  const onChangeChecked = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.checked)
    setChecked(() => e.target.checked)
  }, [])
  return (
    <section className="mt-4">
      <Title>InputTest</Title>

      <div className="flex justify-center mt-4">
    
        <Input
          type="text"
          value={value}
          onChange={onChangedValue}
          className="input input-primary input-sm"
        />
            
        <Input
          type="checkbox"
          checked={checked}
          onChange={onChangeChecked}
          className="ml-4 checkbox checkbox-primary input-sm"
        />
      </div>
    </section>
  )
}

onChange event type → ChangeEvent< HTMLInputElement>

checkbox,radio → e.target.checked 속성 사용

onChange 이벤트콜백

const [selectValue, setSelectValue] = useState<string>(초깃값)

const onChange = (e:ChangeEvent<HTMLInputElement>) =>{
	setSelectedValue(notUse => e.target.value)	
}

고차함수를 쓰면

const [selectValue, setSelectValue] = useState(초깃값)

const onChange = (value:string) => ( ) => setSelectedValue(notUse => value),[ ])