[React] useCallback 사용이유와 코드예시

* useCallback 하는일

> 함수를 memoization한다. 

> 의존값이 바뀌었을 때만 함수를 생성하고, 값이 바뀌지 않았다면 함수를 생성하지 않는다.

> 의존값이 바뀌지 않았을 경우, 이전에 저장해둔 함수를 사용한다.

 

* useCallback 를 사용하는 이유와 주의점

> 사용이유 : 렌더링시에 불필요한 함수생성을 막아줌으로써, 성능을 최적화 해준다.

> 주의점 : meoization과정 자체에서 리소스가 발생하므로, 부적절하게 사용할 경우 오히려 성능을 악화시킬 수 있다.

 

* useCallback  예시코드

// const memoizedCallback = useCallback(callback(), [depth]);
// 의존값을 depth에 넣어준다.

const add = useCallback(() => x + y, [x, y]);