React.memo 란?
React.memo 는 고차 컴포넌트 (Higher Order Component) 컴포넌트의 성능을 최적화하는 방법 중 하나.
컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징 하도록 래핑하여 경우에 따라 성능 향상 가능.
즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링된 결과를 사용.
React.memo 는 이전에 렌더링된 결과를 메모이제이션하여, 같은 prop이 전달될 때 이전에 렌더링한 결과를 재사용. 이렇게 함으로써, 컴포넌트가 같은 prop으로 다시 렌더링될 때마다 불필요한 렌더링을 방지하고, 성능을 향상.
React.memo는 props 변화에만 영향을 줌.
React.memo로 감싸진 함수 컴포넌트 구현에 useState, useReducer, useContext 훅을 사용한다면, 여전히 state나 context가 변할 때 다시 렌더링 됨.
props가 갖는 복잡한 객체에 대하여 얕은 비교만을 수행하는 것이 기본 동작. 다른 비교 동작을 원한다면, 두 번째 인자로 별도의 비교함수 사용.
function MyComponent(props) {
}
function areEqual(prevProps, nextProps) {
/*
nextProps가 prevProps와 동일한 값을 가지면 true를 반환하고, 그렇지 않다면 false를 반환 (false 반환시 재 렌더링)
*/
}
export default React.memo(MyComponent, areEqual);React.memo의 단점은 ?
-
React.memo가 메모이제이션을 수행하는 데 추가적인 메모리 사용.
메모이제이션을 통해 이전에 렌더링한 결과를 재사용하므로, 컴포넌트의 인스턴스가 계속해서 메모리에 쌓이는 것을 방지할 수 있지만, 이전에 렌더링한 결과를 저장하는 데 사용되는 메모리가 커질 수 있음. -
React.memo는 얕은 비교를 수행. 따라서, prop이 복잡한 객체나 배열인 경우에는 예상치 못한 결과가 발생할 수 있음.
예를 들어, 객체나 배열의 내부 값이 변경되었지만, 참조 값이 변경되지 않은 경우에는 React.memo가 이를 감지하지 못함. 이 경우, React.memo 대신 React.useMemo를 사용하여 메모이제이션을 수행해야 할 수 있음.
useMemo 란?
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);메모이제이션 된 값을 반환!
React에서 useMemo는 컴포넌트 내에서 계산 비용이 높은 함수의 결과 값을 메모이제이션하는 React Hook. useMemo를 사용하면, 컴포넌트의 렌더링이 발생할 때마다 함수를 다시 계산하지 않고, 이전에 계산한 값을 재사용 할 수 있음.
useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산. 이 최적화는 모든 렌더링 시의 고비용 계산을 방지.
useMemo로 전달된 함수는 렌더링 중에 실행된다는것을 기억. 통상적으로 렌더링 중에는 하지 않는 것을 이 함수 내에 하면 안됨.
예를 들어, 사이드 이펙트는 useEffect에서 하는 일.
만약, 배열이 없는 경우라면 매 렌더링 때마다 새 값을 계산.
useMemo의 단점은 ?
useMemo의 가장 큰 단점은, 오버헤드(overhead) 가 발생할 수 있음.
useMemo는 계산 비용이 높은 함수의 결과 값을 메모이제이션하여, 불필요한 계산을 줄일 수 있도록 도와주지만, 메모이제이션을 사용하지 않았을 때보다 추가적인 메모리 사용과 처리 시간이 소요.
또한, 메모이제이션의 종속성 배열을 정확하게 지정하지 않으면, 메모이제이션 된 값이 부정확하게 되거나, 원하지 않는 순간에 재계산 발생.
따라서, useMemo는 메모이제이션을 사용하여 성능을 최적화하려는 경우에 사용하는 것이 좋지만, 항상 성능을 개선할 수 있는 것은 아니므로 사용에 주의 필요.
결정적으로, 최적화는 항상 적절한 시기와 장소에서 이루어져야 하며, 프로파일링(profiling) 및 성능 테스트를 통해 최적화가 실제로 필요한 지를 확인.
참고자료 :
https://ko.reactjs.org/docs/hooks-reference.html#usememo
https://ko.reactjs.org/docs/react-api.html#reactmemo
