hooks - useCallback
useCallback
- react의 렌더링 성능을 위해 사용
- 컴포넌트가 렌더링될때마다 함수를 새로 생성하는것을 방지
- 의존성 매개변수의 인자가 변하지 않으면 함수도 그대로 사용
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>
)
}
Author And Source
이 문제에 관하여(hooks - useCallback), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@akatapata/hooks-useCallback저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)