useCallback()이란?

| useCallback()을 사용한 함수 재사용

 

useCallback() 은 useMemo 와 비슷한 Hook 입니다.

 

useMemo : 특정 결과값을 재사용

useCallback: 특정 함수를 새로 만들지 않고 재사용

 

 

| useCallback()을 사용하는 이유 ?

함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어집니다.

함수를 선언하는 것 만으로는 리소스 낭비가 많지는 않지만, 이런 함수가 많아지면 아무래도 부담이되는 건 사실입니다.

컴포넌트에서 props 가 바뀌지 않으면 Virtual DOM 에 새로 렌더링 하는 것 조차 하지 않고 최적화를 진행합니다.

따라서 되도록 최적화를 위해 낭비를 줄여야하는 건 사실이라고 생각합니다.

 

 

| useCallback() 사용

사용시 주희할 점, 인에서 사용하는 상태 혹은 props 가 있다면 꼭 deps 배열안에 포함시켜야 된다는 것 입니다.

만약 deps 배열 안에 함수에서 사용하는 값을 넣지 않게 된다면, 함수 내에서 해당 값들을 참조할 때 가장 최신 값으로 참조 할 것이라고 보장 할 수 없습니다.

따라서, props 로 받아온 함수가 존재한다면 deps 에 넣어주셔야 합니다.

 

useCallback 은 useMemo 를 기반으로 만들어졌습니다.

 

다만, 큰 차이점은 함수를 위해서 사용 할 때 더욱 편하게 해준 것 뿐입니다.