꾸준히 성장하는 개발자

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

React

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

ahleum 2022. 5. 24. 14:36

컴포넌트 성능을 최적화 하기 위해 사용되는 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이기 때문에 오직 함수형 컴포넌트 안에서만 사용 가능하다.

 

'React' 카테고리의 다른 글

[React with TypeScript]  (1) 2022.05.27
[React Hooks] useEffect( )  (0) 2022.05.25
[React Hooks] useRef  (0) 2022.05.23
[React] React state 비동기성  (0) 2022.05.20
[React 라이브러리] 상태 관리 라이브러리 Redux  (0) 2022.05.20