useCallback 을 사용해야 성능 최적화가 된다고요?

리액트로 프로젝트를 할때 따로 함수가 필요한 경우 그냥 만들어 줘서 썻었는데 공부를 하다보니까

최적화를 위해서는 usecallback 이란걸 써야 좋다라고 한다.

 

무엇인지 알아 봅세

 

1. hook 을 사용할때 컴포넌트가 렌더링 된다라는 것이 그함수를 실행 하는거고 그렇게 되면 그함수안에 선언 되어있던 것들이 다시 선언이 되는구나 

 

2.함수내의 state 나 전달받은 prop 이 변경되는 경우 리렌더링 된다

 

1.번에 관한 부분의 비효율을 줄여주는게 useCallback 의 사용이고 2.번에 관한 부분이 usememo 라고 생각하는데 좀더 알아보자

 

useCallback : 메모이제이션된 함수를 반환한다.

useMemo : 메모이제이션된 값을 반환한다 

 

라는게 핵심 이라는데 메모이제이션이 뭔지 그리고 어떨때 반환을 한다는 건지 한번 알아보자

 

usememo 는 의존성에 넣어준 값의 변화시에만 다시 값을 가져오고 아니면 메모이제이션 된값을 사용 한다 근데 그값을 가져오는게 정규표현식이라던가 복잡한 로직이면 필요한때 그러한 경우가 아니라면 필수적은 아닌 선택적인 하지만 하면 좋은 그런 느낌인가 ㅎ

 

useCallback 도 같은 원리인데 목적만 달랐다 함수를 불필요하게 재선언 하지 않는것 이라는

그함수 안에서 쓰이는 state 들은 의존성에 추가를 해줘야 하고 그외에도 캐치가 필요한 부분이 있으면 넣어줘야지 싶다.

 

출처: gist.github.com/ninanung/767ca722befa8b0affe51ffa0064296b

때늦은 React Hooks 시리즈 4탄 - useCallback/useRef

leehwarang.github.io/2020/05/02/useMemo&useCallback.html

이제는 사용해보자 useMemo & useCallback - 이화랑 블로그

감사합니다