728x90

useCallback 은 지난포스팅에서 다뤗던 useMemo 와 비슷한 Hook 이다

useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면,

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

 

필자는 아래와같이 사용해보았다

위 코드는 3600개의 api가 타이핑을할때마다 검색되는것을 방지하는 코드이다

예를들자면 낙산사를 검색한다면 3600개의 데이터에서 ㄴ에서랜더링 ㅏ에서랜더링 ㄱ에서 렌더링

낙산사라는 검색을할때 8번의 랜더링을 한다는말이다

 

하지만 useCallback 함수를 사용한다면 delay를 400이라는 숫자만큼 주었기에 

타이핑을한번할때마다 실행되어 낙산사라는 타이핑이끝낫을떄 400이라는 딜레이후에 

api를 랜더링한다 

 

이런식으로 최적화할때 사용하면 정말좋다 

다음 시간에는 위코드에서사용한 디바운싱을 알아보도록하자

728x90

+ Recent posts