[React] useMemo, useCallback

useMemo
=> 함수의 결과 값을 저장, 2번째 인자의 값이 바뀌면 다시 실행 (동일한 실행이 일어나는 함수에 사용)

import React, { useMemo } from 'react';

const a = useMemo(() => b(), [xState, yState]);

a가 b()함수의 return 값을 가짐
xState 또는 yState의 값이 바뀌면 useMemo()가 다시 실행되어 b()함수의 return값을 a에 저장

 

useCallback
=> 함수를 자체를 저장, 함수 컴포넌트가 재실행되도 해당 함수가 재생성되지 않음 (함수 생성 비용이 클 때 사용)

import react, { useCallback } from 'react';

const aFunc = useCallback(() => {
  xCode;
}, [yState, zState]);

 

 

 

해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.