useMemo

useMemo란?

useMemo는 메모이제이션 기법을 이용해 연산의 결과값을 기억했다가 필요할 때 사용함으로써

불필요한 함수 호출을 막아 주는 리액트 훅이다.

 

 

useMemo를 사용하면 특정 함수를 호출했을 떄 그 함수의 반환값을 기억한다.

그리고 같은 함수를 다시 호출하면 기억해 두었던 값을 반환한다. 따라서 useMemo를 이용하면 함수의 반환값을 다시 구하는 불필요한 연산을 수행하지 않아 성능을 최적화 할 수 있다. 

이처럼 함수의 연산 결과를 기억하는 행위를 '메모이제이션 한다'라고 표현한다.

 

const value = useMemo(callback, deps);
 	      	    //  콜백함수, 의존성배열

함수 useMemo를 호출하고 2개의 인수로 콜백 함수와 의존성 배열을 전달한다. 호출된 useMemo는 의존성 배열에 담긴 값이 바뀌면 콜백 함수를 다시 실행하고 결과값을 반환한다.

 

예를들어 다음과 같이 useMemo를 사용하면 의존성 배열 count의 값이 변할 때만 count*count를 계산해 value에 저장한다. 

 

const value = useMemo(() => {
	console.log('렌더링 되는중')
	retrun count * count;
}, [count]);

이렇게하면 count가 변경되는게 아닌이상 다른 함수가 실행이 되더라도 위에 함수는 렌더링 되지 않는다.