[React] memoization 꼭 필요한가?

앞서 포스팅한 내용 중 렌더링 최적화를 위한 방법으로 메모이제이션이 있다는걸 포스팅 했던적이 있다.

 

🙌🏻 메모이제이션을 사용하는 이유는? 👇🏻 아래 포스팅을 보고 오면 된다!

 

https://seonzzi-honey-factory.tistory.com/5

[React] 렌더링 최적화

하지만! 이번 포스팅은 이것들을 쓰면 안되는❌ 이유와 과연 메모이제이션이 꼭 필요한가에 대해 포스팅을 하려고 한다. 

---

 

React에서의 Memoization(메모이제이션) 이란?

- 컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산을 하지 않도록 하여,

속도를 높이는 기술이다. 보통 애플리케이션의 최적화를 위해 사용된다!

👉🏻 캐싱과 비슷하다.

 

React에서 메모이제이션을 하는 대표적인 방법으로는 useCallback, useMemo, React.memo가 있다.

 

⚠️주의⚠️
하지만 useMemo는 오히려 애플리케이션의 속도를 저하시킬 수 있다. 
명심해야할 것은 메모이제이션은 공짜가 아니다! ❌

---

useMemo()의 단점?

- useMemo()가 특정 상황에선 정말 도움이 되고 중요한 역할을 하는 것은 맞지만,

대부분은 부적절한 방법인, 모든 변수를 useMemo로 래핑한다. 

👉🏻 이런 방식은 오히려 가독성을 떨어뜨리고 메모리 사용량을 증가시킬 뿐이다. 

 

- 또한 useMemo는 리렌더링 단계에서만 이점이 있으며, 초기화 하는 동안 메모이제이션은 애플리케이션의 

속도를 저하시키며, 이 효과는 누적이된다. 

👉🏻 이것들이 메모이제이션이 공짜가 아니라는 이유다. 

 

 

 

useMemo()의 사용을 피해야 하는 경우?

• 최적화하려는 계산의 비용이 크지 않은 경우. 이러한 경우, useMemo를 사용할 때 발생하는 오버헤드가 이점보다 클 수 있다.
•  메모이제이션이 필요한지 확실하지 않은 경우. useMemo 없이 시작한 다음, 문제가 발생하면 코드에 점진적으로 최적화를 적용하는 것이 좋다.
• 메모하고 있는 값이 컴포넌트로 전달되지 않는 경우. 이 값이 JSX에서만 사용되고 컴포넌트 트리에 더 깊이 전달되지 않으면 대부분의 경우 최적화를 피할 수 있다. 다른 컴포넌트의 렌더링에 영향을 주지 않으므로 참조를 기억할 필요가 없다.
• 의존성 배열이 너무 자주 변경되는 경우. 이 경우 useMemo는 항상 재계산되므로 성능적인 이점을 제공하지 않다.

 

 

 

참고

https://hayeondev.gatsbyjs.io/230202-usememo-and-usecallback/

https://bum-developer.tistory.com/entry/React-useMemo를-사용하지-말아야-한다