Tiny Bunny
본문 바로가기
JavaScript/React

React - Hook(3)_useCallback

by 내이름효주 2024. 3. 29.

메모이제이션(memoization) : 동일한 입력이 들어오면 재활용하는 프로그래밍 기법

  • useCallback: 메모이제이션된 함수를 반환하는 함수, 이전에 생성된 함수를 기억하고 해당 함수 재사용
    • 함수와는 상관없는 상태 값이 변할 때 함수 컴포넌트에서 불필요하게 함수를 업데이트하는 것을 방지
 

REACT - Hook(2)_useMemo, 활용(소수 판별)

useMemo : 컴포넌트의 성능을 최적화하는데 사용되는 훅 memoization을 뜻함 -> 메모리에 넣기! 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장함으로써 동일한

ohyohyo.tistory.com

  • useMemo , useCallback 차이
  useMemo useCallback 
재사용 계산 비용이 큰 연산의 결과를 재사용 함수를 재사용
반환 연산 결과 함수
메모이제이션 함수
콜백함수 값을 계산하는 로직 함수를 생성하는 로직
사용 배열이나 객체와 같은 큰 데이터를 가공하거나 복잡한 계산을 수행하는 경우 자식 컴포넌트에 전달되는 콜백 함수를 최적화하는 경우