[React] useMemo란?

 

useMemo

useMemo는 리액트에서 컴포넌트의 성능을 최적화하는데 사용하는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 뜻한다. memoization을 잘 활용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다. 

 

useMemo의 구조

const value = useMemo(()=>{
    return calculate();
  },[item])

• useMemo는 useEffect처럼 첫 번째 인자로 함수인 calculate()를 호출하여 결과값을 반환한다. calculate 함수는 여기서 비용이 많이 드는 계산을 수행하는 함수로 가정한다. 
• useMemo의 두 번째 인자는 의존성 배열인 [item]이다. 이 배열에 포함된 값이 변경될 때마다 useMemo에 제공된 함수가 재실행된다. 즉 item의 값이 변경되면 calculate 함수가 다시 호출되어 value가 업데이트된다.
• calculate 함수의 반환값은 value에 저장된다. item 값이 변경되지 않는 한, useMemo는 calculate 함수를 재호출하지 않고 이전에 계산된 value 값을 재사용한다.

useMemo 예시

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 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 함수가 호출되고 있다. 인풋 내용이 바뀔 때는 평균값을 다시 계산할 필요가 없는데, 이렇게 렌더링할 때마다 계산하는 것은 낭비이다. 이럴 때, useMemo를 사용하면 이러한 작업을 최적화 할 수 있다. 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 , 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다. 위의 코드는 아래와 같이 수정할 수 있다.

 

import React, {useState} from 'react';
import { 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]);

  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> {avg}
      </div>
    </div>
  )
}

export default Average;

 

 

const avg = useMemo(()=> getAverage(list), [list]);

 

• ()=> getAverage(list)는 'list' 배열을 인자로 받아 'getAverage' 함수를 호출하고 그 결과를 반환한다. getAverage 함수는 배열의 숫자들의 평균값을 계산한다.
• list가 변경될 때마다 메모이제이션 값(avg)이 재계산된다. 즉 list 배열에 변화가 있을 때만 getAverage 함수가 호출되고, 그 결과가 avg에 저장된다. 
• useMemo를 사용함으로써 , list 배열이 변경될 때만 평균값 계산이 이루어져, 컴포넌트가 재렌더링될 때마다 평균값을 계산하는 것보다 효율적이다.