[React] Hook함수 - useMemo, useCallback 사용하기

useMemo, useCallback  ☞ 리엑트 성능 최적화

- 컴포넌트가 렌더링 ☞ 컴포넌트 함수를 호출하여 실행됨
- 함수 실행될 때 함수 내부에 선언된 표현식(변수, 다른함수 등)도 다시 선언되어 사용
- 컴포넌트는 자신의 state가 변경되거나, 부모에게서 상속된 props가 변경될 때마다 리렌더링

 

1. useMemo :  함수를 반환하지 않고 함수의 특정 결과 값을  memoization해서 재사용

- Memo란? memoization을 뜻함 : 계산된 결괏값을 저장해놓고 있다가 나중에 리렌더링 될 때 

해당 함수 재호출이 아닌 저장된 결괏값을 그대로 불러서 갖다 써준다. (중복 연산을 막아줌)

 

기본 구분 > 

// [deps] : 의존성 배열 (의존해야 할 값을 배열에 담아줌)
const myValue = useMemo(() => {
	return value;
}, [deps])

 

 

 

2. useCallback : 특정 함수 자체를 memoization해서 재사용

기본 구문 > 

const myFun = useCallback(() => {
	return value;
}, [desp])