[React Hooks] useMemo() / useCallback() / useMemo() ↔ React.memo() 차이

컴포넌트 성능을 최적화 하기 위해 사용되는 useMemo, useCallback 이 있다

 

useMemo( ) 

여기서 Memo는 memoization을 뜻하는데
동일한 값을 리턴하는 함수를 반복적으로 호출해야 한다면 맨처음의 값을

메모리에 저장해서 필요할때마다 다시 계산하지 않고 메모리에서 가져와 재사용하는 기법을 말합니다.

memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에

메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다.

 

useMemo는 메모리를 사용하면서 사용이 되기 때문에

불필요한 값까지 메모리에 넣게 되면 성능이 악화되기 때문에 꼭 필요할때만 사용하도록 한다.

 

 

useMemo( ) 구조

const value=useMemo(()=>{
	return calculate();
}, [item]);

const value = useMemo(콜백함수(계산한값을 리턴해주는 함수) , 배열(의존성 배열));

 

 

---

useCallBack( )

useMemo의 함수버전이라고 생각하면 된다.

 

useCallback(fn, deps)    =     useMemo(()=>fn , deps)

위의 두가지는 이렇게 같다고 보면 된다.

 

 

---

useMemo 와 React.memo() 

 

공통점

React.memo와 useMemo 모두 props가 변하지 않으면(이전 props와 동일하면) 인자로 넘긴 함수는 재실행되지 않고, 이전의 메모이즈된 결과를 반환한다는 점에서 공통점이 있다.

 

차이점

1. React.memo는 HOC , useMemo는 hook이다.

2. React.memo()는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능하지만,

   useMemo()는 hook이기 때문에 오직 함수형 컴포넌트 안에서만 사용 가능하다.