8. 성능 최적화의 함정: 언제 최적화를 멈춰야 할까?
모든 코드에 memo와 useMemo를 바르는 것은 오히려 앱을 더 느리게 만들고 코드를 복잡하게 만드는 '과잉 최적화(Over-optimization)'가 될 수 있음
최적화 도구들은 공짜가 아니다. 값을 비교하고 메모리에 저장하는 과정 자체가 메모리와 CPU 자원을 소모하기 때문이다.
최적화가 오히려 독이 되는 순간
리액트의 기본 렌더링 속도는 매우 빠르다. 굳이 최적화가 필요 없는 곳에 도구를 남발하면 다음과 같은 부작용이 생긴다.
❖ 과잉 최적화의 부작용:
- 비교 비용 발생: Props를 매번 비교하는 연산이 실제 컴포넌트를 그리는 비용보다 커질 수 있음
- 가독성 저하: 단순한 코드들이
useCallback과 의존성 배열로 뒤덮여 유지보수가 어려워짐 - 메모리 낭비: 쓰지 않아도 될 값을 캐싱하기 위해 메모리 점유율이 올라감
"성능 문제가 체감될 때" 혹은 "자식이 너무 무거워서 부모의 변화에 민감하게 반응할 때"만 최적화를 적용하는 것이 원칙이다.
최적화 도구 사용 가이드라인
성능 최적화 도구를 언제 꺼내 들어야 할지 결정하는 기준은 다음과 같다.
### 최적화 결정 프로세스
- 기본 렌더링 확인: 먼저 최적화 없이 코드를 작성하고, 실제 앱의 동작이 끊기는지 확인한다.
- 병목 지점 발견: React DevTools의 Profiler 탭을 사용해 어떤 컴포넌트가 불필요하게 자주 그려지는지 찾는다.
- 단계적 적용: 가장 무거운 자식 컴포넌트에
memo를 적용해보고, 그 효과를 유지하기 위해useCallback으로 함수 주소를 고정한다.
실전 팁: 값비싼 연산의 기준
useMemo를 쓸지 말지 고민된다면, 해당 연산이 수백 번의 루프를 돌거나 복잡한 객체를 매번 새로 생성하는지 확인하라.
❖ 사용 권장 상황:
- 참조 동일성 유지: 값이 바뀌지 않았는데 자식의
memo가 깨지는 것을 막아야 할 때 - 무거운 계산: 필터링, 정렬, 데이터 가공 등 CPU 소모가 큰 로직이 포함될 때
- 단순히 변수 하나를 선언하거나 짧은 문자열을 합치는 정도라면 useMemo 없이 생으로 두는 것이 훨씬 낫다.
요약 및 결론
최적화는 필요할 때만 하는 것이 최고의 최적화다. 섣부른 최적화는 코드의 유연성을 해치고 버그를 유발할 수 있다.
열심히 기록할 예정🙃