devlog_zz

이벤트핸들러함수 onChange = {handleChange}, onChange = {e => handleChange(e)} 본문

Front End/React

이벤트핸들러함수 onChange = {handleChange}, onChange = {e => handleChange(e)}

YJ_SW 2022. 11. 28. 15:39
728x90

이벤트핸들러 함수

만약 이벤트 핸들러가 이벤트 객체에 대해 하나의 인수만을 갖는다면 

이벤트 핸들러 함수를 onChange = {handleChange} 이런식으로 선언해도 된다.

onChange = {e => handleChange(e)} 이런식으로 익명 함수로 묶을 필요가 없다.

 

나쁜 예:

export const Name = () => {
  const [name, setName] = useState('')

  const handleChange = e => {
    setName(e.target.value)
  }

  return (
    <>
      <input value={name} onChange={e => handleChange(e)} />
    </>
  )
}

 

좋은 예:

export const Name = () => {
  const [name, setName] = useState('')

  const handleChange = e => {
    setName(e.target.value)
  }

  return (
    <>
      <input value={name} onChange={handleChange} />
    </>
  )
}

 

참고문서 : https://jae04099.tistory.com/203

728x90
Comments