[ React-Hooks ] useMemo 사용하기

1. 평균값 구하기

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

useMemo.js

import React,{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(parseInt(number));
    setList(nextList);
    setNumber('')
  };
  return(
    <div>
      <input type="text" 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;

실행화면

잘작동하지만 숫자를 등록할 때뿐만 아니라 인풋 내용이 수정될 때도 getAverage 함수가 호출되는것을 확인 할수 있습니다 인풋 내용이 바뀔때는 평균값을 다시 계산할 필요가 없는데 이렇게 렌더링이 된다면 메모리 자원의 낭비입니다

useMemo.js

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 Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = e => {
    setNumber(e.target.value);
  };
  const onInsert = e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('')
  };
  const avg = useMemo(() => getAverage(list), [list]); // useMemo 사용
  return(
    <div>
      <input type="text" value={number} onChange={onChange}/>
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) =>
          <li key={index}>{value}</li>
        )}
      </ul>
      <div>
        <b>평균값 : </b> {avg} // {getAverage(list)} 를 {svg} 변경
      </div>
    </div>
  );
};

export default Average;

실행화면

이제 list 배열의 내용이 바뀔때만 getAverage 함수가 호출됩니다