React useMemo - 화면이 렌더링될때마다 함수의 불필요한 호출 방지

 

위와 같이 1초마다 시간이 변경되는 화면이 있을 때 1초마다 화면이 렌더링되면서 화면에 모든 함수가 재호출 된다. compute() 함수도 매번 호출이 되어 콘솔창에 'test'가 찍힘을 확인할 수 있다.

즉 1초마다 refreshTime의 state가 변경되면서 App 컴포넌트가 리렌더링되기 때문에 모든 함수가 1초마다 호출된다.

const App = () => {
    const [refreshTime, setRefreshTime] = useState(90);
    
    ...
    
	const compute = (date:string) => {
 		console.log('test')
 	}
 	return(
 		<div>
			<span>{refreshTime}초</span>
			<h2>{compute(date)}</h2>
 		<div>
 	)
}
export default App;

이렇게 매번 호출되지 않고 date에 변경이 있을때만 compute함수를 호출하고 싶다면 'useMemo'를 사용하면 된다.

useMemo

useMemo를 사용하는 이유

React가 값을 기억해서 불필요한 리렌더링을 방지하기위해 사용한다.
자세하게는 dependencies가 변할 때만 값을 다시 생성한다. 따라서 불필요한 연산 또는 컴포넌트 재실행을 방지할 수 있다.
Memo는 memoization의 약자로 이전의 계산한 값을 재사용한다는 뜻이다.

useMemo 사용법

const 변수이름 = useMemo(() => 호출할함수(a, b), [a, b]);

useMemo의 첫 번째 파라미터 : 호출할 함수useMemo의 두 번째 파라미터 : 의존성(deps) 배열

따라서 위의 코드를 아래와 같이 useMemo를 사용하여 변경할 수 있다. useMemo를 사용하면 매초마다 화면이 렌더링될때마다 compute함수가 매번 호출되는게 아닌, compute함수가 의존성을 가진 date가 변경될때만 compute함수가 호출된다.

const App = () => {
    const [refreshTime, setRefreshTime] = useState(90);
    
    ...
    
	const compute = (date:string) => {
 		console.log('test')
 	}
    const computedTime = useMemo(() => compute(date), [date]);

 	return(
 		<div>
			<span>{refreshTime}초</span>
			<h2>{computedTime}</h2>
 		<div>
 	)
}
export default App;