React useCallback - 함수 재사용
useCallback을 공부해봅시당!
useCallback - useMemo와 비슷한 hook
- useMemo : 특정 결과값을 재사용할때 사용
- useCallback : 특정 함수를 새로 만들지 않고 재사용할때 사용.
useCallback을 사용해 함수 재사용
출처:https://react.vlpt.us/basic/18-useCallback.html
을 읽고 정리함.
const onCreate = ()=>{
const user = {
}
};
const onRemove = id => {
};
const onToggle = id =>{
};
위의 함수들은 컴포넌트가 리렌더링 될떄마다 새로 만들어진다.
한번 만든 함수를 재사용하는 것은 중요하다.
const onChange = useCallback(
e=>{
}
);
const onCreate = useCallback(()=>{
});
const onRemove = useCallback (
);
함수 안에서 사용하는 상태 props
가 있다면 꼭, deps 배열안에 포함시켜야한다.
useCallback
은 useMemo
를 기반으로 만들어짐
const onToggle = useMemo(
()=> ()=> { /* */},[users]
);
useCallback은 컴포넌트 렌더링 최적화 작업을 해줘야 성능이 최적화됨
-> 어떤 컴포넌트가 렌더링 되는지 확인하기 위해서
-> React DevTools 를 사용한다.
-> 'highlight Updates'
Author And Source
이 문제에 관하여(React useCallback - 함수 재사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lemon-ginger/React-useCallback-함수-재사용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)