useMemo?

useMemo란 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식입니다.

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

Average.js 파일을 생성하여 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여주는 함수 컴포넌트를 작성해 보겠습니다.

useMemo 사용하여 최적화하기

Average.js

import { useState } from 'react';

const getAverage = numbers => {
    console.log("평균값 계산 중..");
    if(numbers.length === 0) return 0;
    //reduce = 누적 연산(이 경우엔 배열의 모든 요소를 하나의 값(sum)에 누적합니다)
    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>
            <p><b>평균값:</b>{getAverage(list)}</p>
        </div>
    );
};

export default Average;

값이 추가되는 것과 추가한 값들의 평균을 확인할 수 있습니다.

그런데 이 코드를 실행해서 콘솔을 보면 등록 버튼을 누를때가 아닌

input을 수정할 때마다 getAverage 함수가 호출되는 것을 볼 수 있습니다.
input을 바꿀 때는 평균값을 계산할 필요가 없는데 계속 호출되는것은 낭비겠죠?

**useMemo** Hook을 사용하면 이러한 작업을 최적화 할 수 있습니다.

수정된 Average.js

import { useState, useMemo } from 'react';

const getAverage = numbers => {
    console.log("평균값 계산 중..");
    if(numbers.length === 0) return 0;
    //reduce = 누적 연산(이 경우엔 배열의 모든 요소를 하나의 값(sum)에 누적합니다)
    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>
            <p><b>평균값:</b>{avg}</p>
        </div>
    );
};

export default Average;

이처럼 useMemo을 사용해 값이 변경될 경우에만 함수를 호출하여 최적화 할 수 있습니다.