실무에서 useCallback useMemo 자주 사용하나요?

이 질문을 저도 많이 받았어서 블로그에 한 번 정리 해 보았습니다. 나중에 시간 나실 때 참고해보세요. https://devowen.com/462

안녕하세요! useCallback, useMemo는 보통 2가지 경우에서 자주 사용하는 것 같습니다. 1. 흔히 말하는 빡센 연산을 캐싱하기 위함 2. object, array, arrow function등 js referential equality 때문에 의도한대로 리렌더가 될/안될 때 위 2가지 경우 말고는 쓸 일이 없는 것 같아요. useCallback과 useMemo는 리렌더가 되는 컴포넌트에서만 유용하고, 한번 렌더되고 마는 컴포넌트에서는 쓸 필요가 없습니다. 실제로는 1번 보다 2번의 경우 때문에 더 많이 쓰는 것 같아요.

리액트에서 메모이제이션을 위해서 사용하는 훅들인데, 메모이제이션을 활용하는건 정답이 정해있지는 않은것 같습니다. 아래 포스팅 참고해보시면 좋을것 같습니다! https://yceffort.kr/2022/04/memo-for-referential-stability-in-react

자주 사용됩니다! 불필요한 연산들을 막는데 도움이 돼서 복잡한 계산들을 처리하는데 쓰고 있습니다. 하지만 해당 훅들이 안보이는 곳에서 추가 작업을 해주는 것이기 때문에. 복잡하지 않은 계산과 같이 사용할 경우 오히려 비효율적인 경우가 종종 있어서 주의하셔야 합니다

메모이제이션은 불필요한 반복적인 연산을 막을때 주로 사용합니다. 설명만 들었을때는 마법의 도구 같아 보일수도 있겠지만, 세상에는 공짜가 없듯이 값비싼 연산을 최적화 하주는 대신에 컴퓨터 메모리 공간을 지불해야합니다. 메모이제이션 할 대상 데이터 크기에 따라 달라지겠지만 너무 잦은 사용시 메모리를 많이 잡아먹게 됩니다. (이 또한 성능에 영향이 있을수 있어요) 대부분의 상황에서는 작은 데이터 혹은 짧은 함수에 사용되기에 메모리사용으로 인한 문제로 이어지진 않을거에요. 하지만 성능이란게 예방해서 나쁠게 없는것처럼 정말 필요한 상황에만 사용하는 습관을 갖는게 중요합니다. useEffect도 메모이제이션 함수들도 사용해야하는 상황을 잘 살펴보면 구조적으로 해결 가능한 문제인 경우가 꽤나 많거든요!