메모이제이션의 장단점
•
꼭 필요한 곳에만 메모이제이션 사용
◦
메모이제이션의 두가지 비용: 값 비교하여 재계산 필요한지 확인 / 이전 결과물 저장 및 로드
◦
메모이제이션은 트레이드 오프가 있는 기법으로 섣부른 최적화는 독이 될 수 있음
•
랜더링 과정의 비용이 비싸니 모두 메모이제이션
◦
일일이 모든 경우에 memo 사용여부 결정 힘듬 → 일단 모두 memo로 감싸자
◦
이미 리액트는 이전 결과물을 저장하고 있어 props에 대한 얕은 비교만 비용임
◦
memo 미사용 시 랜더링, 컴포넌트 내 로직 재실행, 자식컴포넌트 실행, 가상 DOM 비교 발생
useMemo / useCallback
•
리랜더링 시 메모이제이션X → 모든 객체 재생성 → 참조 변경 됨
•
참조가 변경 된 값이 의존성 배열에 쓰인다면 실제 값이 변경되지 않아도 useEffect 등 훅 실행 됨
•
반환값이 객체인 경우 useMemo로 감싼다면 사용하는 쪽에서 참조투명성 유지 가능
결론
•
일반적으로 props 에 대한 얕은 비교 비용 < 컴포넌트 결과물 계산 및 DOM 비교
◦
따라서 메모이제이션은 여유만 있다면 성능 향상에 도움이 될 가능성이 큼
•
props로 전달되는 값, 함수 → 참조투명성을 위해 useCallback, useMemo 사용 좋음
◦
참조투명성: 입력이 같으면 출력이 항상 같고 부작용(side effect)이 없음
