🌙 [React] useMemo

🌊 Hook - useMemo

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

 

 

 

액션 값은 주로 다음과 같은 형태로 이루어져 있다.

리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요는 없으며, 객체가 아니라 문자열이나 숫자열이어도 상관 없다.

{
 type : 'INCREMENT',
 // 다른 값들이 필요하다면 추가로 들어감
}

 

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;

 

 

Average 컴포넌트 실행 결과

 

단, 이 방식은 input 내용이 수정될 때도 getAverage 함수가 호출 된다. input 내용이 변경될 때 평균값을 다시 계산하는 것은 낭비이기 때문에 useMemo를 이용하여 코드를 최적화 할 수 있다. 렌더링하는 과정을 특정 값이 바뀔 때만 연산을 실행하고, 원하는 값이 바뀌지 않는다면 이전에 연산했던 결과를 다시 사용하는 방식이다.

 

 

import React, { useMemo, 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('');
  };

  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;

 

평균값에서 getAverage(list) 함수를 호출하지 않고, useMemo를 사용한 avg를 출력하게 한다. 

 

useMemo

 

 

useMemo 사용 후 최적화 된 모습

 

 

리액트를 다루는 기술 을 참고하였습니다.