[React] Hooks : useMemo( )

📝 useMemo

useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다.

📜 useMemo 활용

// 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여수는 함수형 컴포넌트
import { useState } 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 Average = () => {
	const [list, setList] = useState([]);
  	const [number, setNumber] = useState('');
  
  	const onChange = (e) => {
    	setNumber(e.target.value);
    };
  	const onInsert = (e) => {
    	const nextList = list.concat(parsInt(number));
      	setList(nextList);
      	setNumber('');
    };
  	
  	return(
    	<div>
      		<input value={number} onChange={onchange} />
      		<button onClick={onInsert}>등록</button>
			<ul>
              {
            	list.map((value, index) => (
                	<li key={index}>{ value }</li>
                ))
              }
            </ul>
			<div>
            	<b>평균값 : </b> { getAverage(list) }
            </div>
      	</div>
    )
}

export default Average;

이처럼 코드를 짜게 되면 숫자를 등록할 때뿐만 아니라 input내용이 수정될 때도 getAverage 함수가 호출됩니다. input 내용이 바뀔 때는 평균값을 다시 계산할 필요가 없기 때문에 이렇게 랜더링할 때마다 계산하는 것은 낭비입니다.

useMemo를 사용하면 이러한 작업을 최적화할 수 있습니다.
렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식입니다.

코드 관련 부분을 아래와 같이 수정합니다.

import { useState, useMemo } from 'react'; // useMemo 추가

const avg = useMemo(() => getAverage(list), [list]); // Average 컴포넌트 내부에 추가

// JSX 수정
<div>
  <b>평균값 : </b> { avg }
</div>

이렇게 하면 list배열의 내용이 바뀔 때만 getAverage 함수가 호출됩니다.