useCallback 과 useMemo

useCallback

얘는 인자로 전달된(콜백 함수) 애의 메모이제이션된 애를 반환한다. 걔는 콜백의 의존성이 변경되었을 때만 변화된다.

형태

const memoizedCallback = useCallback(() => {doSomething(a,b)}, [a,b])

활용

React.memo의 경우 props(혹은 state, context)가 변화될 때만 다시 렌더링하도록 되어있다.

얘한테 함수를 prop으로 전달할 경우

<Jasik hamsu={()=>{console.log('hi')}}/> /// jasik은 memoized된 component

  매번 부모가 다시 렌더링 되면 함수도 다시 생성하고, 그래서 jasik은 prop이 계속 바뀐 걸로 인식해서 계속 다시 렌더링한다. 이런 불필요한 렌더링을 줄이기 위해서

<Jasik hamsu={useCallback(()=>{console.log('hi')},[])}/> /// jasik은 memoized된 component

이런 식으로 useCallback을 사용해주면 Jasik은 불필요한 렌더링을 하지 않는다. 이럴 때 활용하기 좋다.

아직 제대로 사용해보지는 않았는데, 이미지 편집기 리팩토링할 때 적용하면 불필요한 렌더링을 많이 줄일 수 있을 것 같다.

useMemo

얘는 useCallback과 비슷한데, 메모이제이션된 값을 반환한다. 그래서 의존성 값 배열의 값이 변경될 때만 다시 계산해서 반환한다.

형태

const memoizedValue = useMemo(() => compute(a,b),[a,b])

활용

뭔가 반복적으로 계속 계산하는 그런 함수들을 얘로 덮어씌워주면 오버헤드가 많이 줄어들 것 같다. -> 성능 최적화

프로젝트에 적용해보면서 내용을 추가하겠다.

 

2가지 쓸 때 주의사항

위에 2 애를 쓸 때 안에다가 sideEffects를 넣지 말자. sideEffects는 useEffect 에서 다 관리해야된다.