[React] useMemo와 useCallback

2024. 7. 26. 17:59· Framework/React
목차
  1. useMemo
  2. useCallback
  3. 주요 차이점
반응형

useMemo와 useCallback은 React의 훅으로, 각각 계산된 값과 함수의 메모이제이션을 도와줍니다.

둘 다 성능 최적화에 사용되지만, 그 목적과 사용 방법이 다릅니다.

 

useMemo

  • 목적 : 계산된 값을 메모이제이션하여 불필요한 재계산을 방지합니다.
  • 사용법 : 계산이 필요한 값을 반환하는 함수를 인자로 받고, 그 값이 변경되지 않는 한 메모이제이션된 값을 반환합니다.
const computedValue = useMemo(() => {
  return expensiveCalculation(someValue);
}, [someValue]);

여기서 expensiveCalculation은 someValue가 변경될 때만 다시 계산됩니다.

 

useCallback

  • 목적 : 함수를 메모이제이션하여 함수가 새로 생성되는 것을 방지합니다.
  • 사용법 : 함수를 반환하는 함수를 인자로 받고, 함수가 의존성 배열의 값이 변경되지 않는 한 동일한 함수 인스턴스를 반환합니다.
const handleClick = useCallback(() => {
  // 이벤트 핸들링 코드
}, [dependency]);

여기서 handleClick 함수는 dependency가 변경될 때만 새로 생성됩니다.

 

주요 차이점

  • useMemo는 계산된 값을 캐시하여, 그 값이 의존성 배열의 값이 변경되지 않는 한 다시 계산하지 않습니다.
  • useCallback은 함수 인스턴스를 캐시하여, 그 함수가 의존성 배열의 값이 변경되지 않는 한 새로 생성하지 않습니다.

 

결론

  • useMemo: 계산된 결과를 캐시하여 재사용합니다.
  • useCallback: 함수 자체를 캐시하여 불필요한 함수 재생성을 방지합니다.
반응형
저작자표시 비영리 변경금지 (새창열림)

'Framework > React' 카테고리의 다른 글

[React] useCallback을 사용하는 이유  (0) 2024.07.24
[React] State와 스냅샷  (1) 2024.02.13
[React] 자바스크립트 새로고침  (0) 2023.02.14
[React] 왜 React를 쓸까?  (0) 2023.02.07
React 시작하기  (0) 2022.11.14
  1. useMemo
  2. useCallback
  3. 주요 차이점
'Framework/React' 카테고리의 다른 글
  • [React] useCallback을 사용하는 이유
  • [React] State와 스냅샷
  • [React] 자바스크립트 새로고침
  • [React] 왜 React를 쓸까?
쓰링
쓰링
Web Front Developer🐣
반응형
쓰링
부앙단 개발로그
쓰링
전체
오늘
어제
  • 전체보기 (57)
    • Language (25)
      • Typescript (4)
      • Javascript (5)
      • HTML, CSS, SCSS (9)
      • Java (3)
      • PHP (1)
      • Dart (3)
    • Framework (8)
      • React (7)
      • Flutter (0)
    • Library (6)
    • Figma (1)
    • Git (4)
    • DB (3)
    • CS (1)
    • Algorithm (6)
      • Baekjoon (2)
      • SWEA (2)
      • 도서 후기 (2)
    • SSAFY (3)
      • SSAFYcial (1)
      • SSAFY 8기 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 처음 java
  • 백준 알고리즘 풀이
  • 백준 입출력과 사칙연산
  • ssafy
  • java 처음
  • 싸피
  • 싸피8기
  • 초보자를 위한 java
  • java전공자
  • SSAFY 비전공
  • SSAFY 합격 후기
  • 싸피 전공자
  • 웰컴 키트
  • 백준 알고리즘 공부
  • 싸피 합격 후기
  • SSAFY 전공
  • java시작하기
  • 싸피 웰컴 키트
  • 백준 브론즈
  • 백준 자바
  • 백준 Java
  • 백준 자바 풀이
  • 싸피 웰컴
  • 싸피 합격
  • SSAFY8기
  • 웰컴키트
  • 백준 java 풀이
  • 싸피8기합격
  • java초보자
  • SSAFY 웰컴키트

최근 댓글

최근 글

hELLO
쓰링
[React] useMemo와 useCallback
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.