How and When to Memoize Your React Application

What is Memoization?

Memoization은 메모리 공간을 더 많이 사용하는 대가로 컴퓨터 프로그램의 속도를 올리는데 사용되는 최적화 기술이다.

이 속도는 같은 input parameter가 제공되었을 때 반복적인 계산을 피하고 대신에 캐시된 결과를 사용하기 때문이다. 동시에, 캐시된 결과를 위해 여분의 공간이 사용되기 때문에 높은 메모리 사용을 초래한다.

만약 다음과 같은 이슈를 다뤄야 한다면, memoizing을 해야한다:

1. 많은 계산을 하는 높은 함수는 효율적인 수행을 위해 결과를 캐시해야한다.
2. 큰 컴포넌트는 같은 input이 주어졌을때 같은 결과를 렌더링하고 이를 Pure Component라고 부른다. 이 경우, 부모가 리렌더링되지만 Pure Component의 props는 변하지 않을때, 불필요한 비싼 렌더가 memoized되어 스킵될 수 있다.
3. Pure component의 props나 dependencies to a dependency array가 전달될 때객체나 함수의 참조 무결성을 유지한다.

How Does Memoization Work?

몇몇 memoization 기술의 경우, React는 컴포넌트가 리렌더링될 것인지를 결정하기 위해 컴포넌트의 props의 얕은 동등 비교를 수행한다. 예를 들어, React.Memo & React.PureComponent가 있다.

만약 얕은 비교 이상을 수행하려면, React.momo는 두 번째 인자로 사용자가 정의한 동등 비교 함수를 가지며 PureComponent의 경우 shouldComponentUpdate 라이프사이클 메서드를 재정의한다.

다른 한편으로, useMemo()와 useCallback은 캐시된 값이 유효한지판단하기 위해 dependency array에 의존한다.

만약 dependency array가 비어있다면, 캐시 무효화가 발생하지 않을 것이다.

Drawbacks of Permature Memoization

너무 멀리가기 전에, premature optimization에 관해 경고하고 싶다.

당신은 애플리케이션에서 프로그램의 병목현상으로 나타나는 일부만 memoize해야한다. 필요하지 않은 코드를 memoization하면 더 좋아지는 대신 더 나빠질 수 있다.

예를 들어:

1. memoization의 CPU/memory 비용은, 전에 언급한 것처럼, 더 많은 메모리 공간을 소비하면서 결과를 캐시함으로써 작동한다. 게다가, memoizationd은 캐시된 결과를 리턴할지 하지 않을지 결정하기 위해 props와 dependencies 비교를 필요로 하며 이는 추가적인처리가 필요하다,
2. React에서 Memoization은 더 많은 dependencies를 관리하기 위해 기존 코드에 추가 복잡성을 더한다. 모든 추가 복잡성은 고려해야할 overhead이다.
3. memoization의 결과로 캐시된 값들이 예상하지 못한 상황에서 다시 계산되지 않는다는 가정을 해서는 안된다.React는 필요한 경우에 캐시된 값들을 무효화할 수 있다. 따라서 bug를 피하기 위해서는 성능최적화를 위해서만 memoization을 사용해야한다.

useMemo에 관한 React 문서에 따르면:

"React에서 memoization을 의미적인 보장으로 사용하는 것이 아니라 성능 최적화로만 의존해야 한다."

또한 React.memo 문서에서 비슷한 문장을 찾을 수 있다:

"이 method는 성능최적화를 위해서만 존재한다. 렌더링을 "막기" 위해 의존하지 말아야 한다. 이는 버그를 일으킬 수 있다."

원칙적으로, 필요할 때만 최적화해라. 그것은 무슨 의미인가?

When to Memoize in React

memoize하지 말아야하는 경우를 알았으니, 사용할 경우와 어떻게 도움이 되는지에 대해 이야기해보겠다.

우선, 컴포넌트를 실행함으로써 시작하고 어떤 성능 이슈가 없는지 확인한다. React Devtools는 성능 이슈를 파악하는데 도움을 주는 유용한 도구이다.

만약 어떤 성능 이슈를 마주친다면, 다음 섹션에서 언급되는 memoization 기술을 사용하여 문제있는 컴포넌트를 최적화할 지 고려할 수 있다.

최적화가 완료된 후에는, 전과 후의 결과를 비교하여 성능향상이 있었는지 확인한다.

만약 성능향상이 미미하다면, 버그와 추가적인 overhead를 피하기 위해 memoization의 변경사항을 버리는 것이 좋을 것이다.

How to Implement Memoization in React

React.memo

useMemo

useCallback

How to Memoize Class-based Components

React.PureComponent

Conclusion

React의 Memoization은 강력한 도구이지만, trade-off가 따른기 때문에 React의 모든 것을 초기 최적화하는 것은 피하는 것을 권장한다.

React는 성능이 우수한 프레임워크이자 이미 여러 최적화를 진행 중이다. 따라서 특별히 필요하지 않으면, 추가적인 최적화는 필요하지 않을 수 있다.

이제 React에서 memoization을 사용하는 여러가지법을 알아봤고, 그것을 사용할때와 피해야할 때를 이해했을 것이다.

---

원문 https://www.bitovi.com/blog/how-and-when-to-memoize-your-react-application