[React] useCallback

useEffect, useCallback, useMemo 다 같듯이

---

const _____ = useCallback(() => {

 

}, [ ]);

---

-두 번째 인자인 [ ]가 바뀌면 새로 실행된다.

-두 번째 인자인 [ ]가 바뀌기 전 까지 함수 자체를 기억한다. 

 

---

문제점

 

const onClickRedo = useCallback(() => {

    console.log(winNumbers);

},[]);

 

이렇게 하면 winNumbers에서 받아온 값들을 계속 기억한다. 

 

반면 계속 새로운 값들로 업데이트 하려면

 

const onClickRedo = useCallback(() => {

    console.log(winNumbers);

},[winNumbers]);

 

이렇게 해야한다.

 

어떨 때 함수를 실행할지 정하는곳이 “ [ ] “ 이다.

---

자식 컴포넌트로 함수를 넘길 때 useCallback을 꼭 해줘야한다. useCallback이 없으면 매번 새로운 함수가 생성된다. 그러면 자식 컴포넌트는 부모로 받은 props가 바뀌었다고 인식하여 매번 새로 렌더링을 해버리기 때문이다.(함수 자체는 사실상 바뀐게 없는데 이렇게 되면 매우 비효율적이다)

그러므로 결론은 자식 컴포넌트에 props로 함수를 넘길때는 자식이 헷갈리지 않게 useCallback을 해주어서 자식이 쓸때없이 리 렌더링이 되지 않고 부모로 부터 받은 함수가 같음을 알아차리게 해줘야한다.