useCallback

useMemo와 useCallback의 차이는 다음과 같다.

memo가 값을 저장하는거에 반에 callback은 함수 그 자체를 저장한다.

 

useMemo: Returns and stores the calculated value of a function in a variable

useCallBack: Returns and stores the actual function itself in a variable

 

 

예를들어 Average라는 컴포넌트에 아래와 같이 함수가 여러개 있다면

const Average = () => {

const onChange = ()=>{}
const onInsert = ()=>{}

}

컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 된다.

컴포넌트의 랜더링이 자주발생하거나 렌더링 해야 할 컴포넌트의 개수가 많아지는 경우에 이부분을 최적화 해주는게 좋다.

최적화 = 만들어 놨던 함수(메모리상에 memoization해둔 녀석)

 

이럴 때 useCallback을 사용해서 바꾸면 

다음과 같이 된다.

const Average = () => {

const onChange = useCallback(()=>{},[])
//의존성 배열이 빔->컴포넌트가 처음 렌더링 될 때만 함수 생성후 계속 재사용
const onInsert = useCallback(()=>{
	const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('')
},[number,list])
//number(인풋 내용이 바뀜) 혹은 list(새로운 항목이 추가 될 때)가 바뀌었을 때에만 함수 생성

}

onChange의 경우 기존의 값을 조회하지 않고 바로 설정만 하기 때문에 배열이 비어있어도 된다.

onInsert는 기존의number와 list를 조회해서 nextList를 생성하기 때문에 배열안에 number와 list를 넣어 주어야 한다.

 

 

 

 

또한 훅을 사용한 리덕스에서도 꽤나 자주 사용되는 패턴이다.

아래와 같이 단순하게 숫자를 1증가시키거나 1감소시키는 컴포넌트가 있다고 하자.

만약에 여기에서 useCallback을 사용하지 않고 

 

onIncrease={()=>dispatch(increase())}이런식으로 카운터 컴포넌트 안에 바로 들어있는 경우에는

숫자가 바뀔 때 마다 onIncrease함수와 onDecrease함수가 새로 만들어진다

즉 +1을 해도 함수가 두개가 새로만들어지고

-1을해도 그렇기 때문에 최적화를 해줄 필요가 있따.

 

아래와 같이 useCallback을 써주면 +1을하면 increase함수만 새로 만들어지고 -1을 하면 decrease함수만 새로 만들어진다.

 

const CounterContainer = () => {
  const number = useSelector((state) => state.counter.number);
  const dispatch = useDispatch();
  const onIncrease = useCallback(() => dispatch(increase()), [dispatch]);
  const onDecrease = useCallback(() => dispatch(decrease()), [dispatch]);

  return (
    <Counter number={number} onIncrease={onIncrease} onDecrease={onDecrease} />
  );
};

export default CounterContainer;

 

 

 

 

 

https://www.youtube.com/watch?v=_AyFP5s69N4