리액트 useCallback, useCallback 쓰는 이유

리액트 useCallback, useCallback 쓰는 이유

 

1. useCallback

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.

React 공식 문서에서는 useCallback을 '메모제이션된 함수를 반한하는 하는 함수' 라고 한다.

 

useMemo와의 차이는,

useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다는 점.

 

2. 왜 useCallback을 사용해야 할까?

현재 하위 컴포넌트에 전달하는 콜백 함수가 inline 함수로 사용되거나, 컴포넌트 내에서 함수를 생성하고 있다면 새로운 함수가 만들어지게 된다. 예를들어, Counter안에 increament 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어지게 된다.

함수를 재 선언 하는것은 CPU, 큰 메모리도 차지하지 않지만 한번 만든 함수를 재 사용하고, 필요할 때만 재 생성 하는것은 중요하다.

 

 

 

 

 

useCallback과 React.memo를 함께 사용한다면 컴포넌트를 최적화 할수 있는데 그 부분은 다음에 정리해봐야겠다..

참고:

https://velog.io/@rjsdnql123/TIL-React.useCallback-%EC%9D%B4%EB%9E%80

https://velog.io/@yejinh/useCallback%EA%B3%BC-React.Memo%EC%9D%84-%ED%86%B5%ED%95%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94