React에서 memo를 남용하면 어떤 일이 발생하나요?

[prgmr99]

memo를 종종 사용하는데, 과하게 사용하면 어떤 일이 발생하는지 궁금합니다.

과하다는 기준도 모호한데, 선배님들은 언제 사용하는게 적절하다고 생각하시나요?
사용하시는 기가 막힌 상황이 궁금합니다.

[iam-cong]

안녕하세요, @prgmr99 님!
저도 이 부분에서 한동안 헷갈렸는데, 최근에 조금씩 정리해봤어요.

1. 성능이 오히려 나빠질 수 있어요

React.memo는 props의 얕은 비교(shallow comparison) 를 통해 불필요한 렌더링을 막아주는 기능인데요, 이 비교 자체도 연산 비용이 들어가기 때문에, 컴포넌트가 아주 단순하거나 props가 자주 바뀐다면 오히려 비교 비용 > 렌더링 비용 이 될 수도 있어요.

특히 memo의 두 번째 인자로 커스텀 비교 함수를 넣어서 깊은 비교까지 하게 되면, 그 연산 비용은 더 커질 수 있겠죠.

2. 잦은 변화가 있는 컴포넌트엔 의미가 없어요

props나 state가 계속 바뀌는 컴포넌트라면, memo는 거의 의미가 없어요.
이럴 땐 그냥 일반 컴포넌트로 사용하는 게 더 깔끔하더라고요.

---

그럼 언제 쓰면 좋을까요?

구글링을 해보면서 reddit에서 비슷한 고민을 한 글을 찾았어요!

• 드래그 앤 드롭(dnd-kit 등)에서 컴포넌트를 이동시킬 때, 불필요한 리렌더링이 생기는경우
• 복잡한 테이블의 셀/행을 렌더링 할 때, 실제로 바뀌는 셀/행이 일부인 경우
• 위의 케이스들 정도가 대표적 인 것 같아요.

저는 예전에 react-flow 같은 노드 기반 에디터를 다룰 때 써본 적이 있었는데요,
각 노드들이 항상 변하지는 않다 보니, 렉걸리는 노드들에 memo를 적용했을 때 꽤 성능 개선이 있었어요.

사용하실 때는 react의 Profiler 컴포넌트로 직접 렌더링 시간을 측정해보면서
정말 성능에 영향을 주는지 확인한 뒤에 적용해보는 걸 추천드려요!

[prgmr99]

@iam-cong 님!
친절하고 자세한 답변 감사합니다.

말씀해주신 내용을 바탕으로 적절한 저만의 기준이 생길 수 있도록
경험적 데이터를 충분히 쌓아보겠습니다!

감사합니다~