[React] useMemo

useMemo

성능을 최적화하기 위하여 연산된 값을 useMemo를 이용하여서 재사용하도록 하는 Hook입니다.

React의 공식문서에는 다음과 같이 나옵니다.

https://ko.reactjs.org/docs/hooks-reference.html#usememo

[Hooks API Reference – React

A JavaScript library for building user interfaces

ko.reactjs.org](https://ko.reactjs.org/docs/hooks-reference.html#usememo)

즉 성능 최적화를 위해서 사용 할 수 있지만, 보장이 되어 있지는 않다는 것입니다.

평균 값을 계산하는 예제를 살펴보겠습니다.

useMemo를 사용하지 않을 때

Avg.js

	if (numbers.length === 0 ) return 0;
	const sum = numbers.reduce((a, b) => a + b);
	return sum / numbers.length;
	}
	const Avg = () => {
	const [list, setList] = useState([]);
	const [number, setNumber] = useState('');
	const onChagne = e => {
	setNumber(e.target.value);
	};
	const onInsert = e => {
	const nextList = list.concat(parseInt(number));
	setList(nextList);
	setNumber('');
	}
	return (
	<div>
	<input value={number} onChange={onChagne}/>
	<button onClick={onInsert}>등록</button>
	<ul>
	{list.map((value, index) => {
	<li key={index}>{value}</li>
	})}
	</ul>
	<div>
	<p>평균: {getAverage(list)}</p>
	</div>
	</div>
	)
	}
	export default Avg;

view raw Avg.js hosted with ❤ by GitHub

app.js

	import React from "react";
	import Avg from "./component/Avg";
	const App = () => {
	return (
	<Avg/>
	)
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

실행 화면

개발자 도구를 확인해보면 숫자를 등록하거나 수정할 때도 getAverage 함수가 호출이 되는것을 확인 할 수 있습니다.

이번에는 useMemo를 사용해보겠습니다.

useMemo 사용

	import React, { useState, useMemo } from 'react';
	const getAverage = numbers => {
	console.log('평균 값 계산 중')
	if (numbers.length === 0 ) return 0;
	const sum = numbers.reduce((a, b) => a + b);
	return sum / numbers.length;
	}
	const Avg = () => {
	const [list, setList] = useState([]);
	const [number, setNumber] = useState('');
	const onChagne = e => {
	setNumber(e.target.value);
	};
	const onInsert = e => {
	const nextList = list.concat(parseInt(number));
	setList(nextList);
	setNumber('');
	}
	const avg = useMemo(() => getAverage(list), [list])
	return (
	<div>
	<input value={number} onChange={onChagne}/>
	<button onClick={onInsert}>등록</button>
	<ul>
	{list.map((value, index) => {
	<li key={index}>{value}</li>
	})}
	</ul>
	<div>
	<p>평균: {avg}</p>
	</div>
	</div>
	)
	}
	export default Avg;

view raw Avg.js hosted with ❤ by GitHub

실행 화면

이제는 list의 배열이 변할때만 함수가 호출되는 것을 알 수 있습니다.

즉 리렌더링이 일어날때 useMemo를 사용하면 최적화를 할 수 있을것입니다!

 

이번 예제는 velopert님 예제를 참고했습니다.

https://velopert.com/

VELOPERT.LOG

전체 소스코드는 github에서 확인 가능합니다.

https://github.com/hanhyung6376/learn-react/tree/master/use-memo