메모이제이션 (Memoization)

→ 연산의 계산 결과를 메모리에 저장해두고, 동일한 계산이 필요할 때 이전에 저장한 값을 재사용하는 기법

useMemo

• 컴포넌트 내부에서 계산된 값 메모이제이션
• 이전 계산 값 재사용
• 계산 비용이 높은 연산 결과 캐싱하는 데 유용

useCallback

• 함수를 메모이제이션
• 불필요한 렌더링 방지
• 이벤트 핸들러 함수나 콜백 함수 메모이제이션 할 때 사용

React.memo

• 컴포넌트 자체를 메모이제이션
• 이전 렌더링 결과 재사용
• 컴포넌트 중복 렌더링 방지

필요성

• 복잡한 연산 수행 시 결과를 재사용함으로써 불필요한 자원 소모 줄임
• 동일한 계산 반복 수행 방지로 코드 실행 속도 향상
• 동일한 입력값에 대해 동일한 결과 반환으로 일관성 제공
• 중복 렌더링 방지 ⇒ 성능 향상

references
👉 https://velog.io/@hsk10271/TIL-30