hooks - useCallback

useCallback

• react의 렌더링 성능을 위해 사용
• 컴포넌트가 렌더링될때마다 함수를 새로 생성하는것을 방지
• 자식 컴포넌트로 함수를 전달하는 경우
  • 일반함수는 부모 컴포넌트가 렌더링 될때마다 새롭게 생성됨
  • useState나 useReducer의 상태값 변경함수는 불변
  • useCallback으로 생성한 함수는 의존성 배열의 값이 변경될때만 새로 생성
• 의존성 매개변수의 인자가 변하지 않으면 함수도 그대로 사용

useCallback을 이용해 함수 정의하기

• useCallback(함수,의존성-변수-리스트)

export default function InputSample(){
  
  const [text, setText] = useState('');

  const onChange = useCallback((e:React.ChangeEvent<HTMLInputElement>)=>{
    const text = e.target.value
    setText(text)
  },[])
  
  const onReset = useCallback(()=>{
    setText('')
  },[])
  
  
  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <button onClick={onReset}>reset</button>
      <div>
        <b>Value : </b> {text}
      </div>
    </div>
  )
}