React) Hooks : useMemo를 이용하여 연산 최적화하기

Hooks : useMemo

---

useMemo는 이전에 계산한 값을 재사용하는데 사용하는 Hook 입니다. 

useMemo(() => 연산할 함수, deps 배열);

여기서 deps 배열 안에 넣은 내용이 바뀌면 등록한 함수를 호출하여 연산하고, 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용합니다. 

즉, 매번 연산을 수행하는 것이 아니라 두번째 파라미터로 전달한 배열의 값이 바뀔 때에만 연산을 하는 것입니다. 

이를 통해 불필요한 연산을 하지 않을 수 있습니다.

---

다음은 리스트에 숫자를 추가하여 리스트 값들의 평균을 보여주는 함수형 컴포넌트입니다. 

• view

• source code

import React, { useState, useMemo } from 'react';

const getAverage = list => {
    console.log('평균값 계산 중...');
    if (list.length===0) return 0;
    const sum = list.reduce((a,b) => a+b);
    return sum/list.length;
}

const Average = () => {
    const [list,setList] = useState([]);
    const [number, setNumber] = useState('');

    const handleChange = e => setNumber(e.target.value);
    const handleKeyPress = e => {
        if (e.key === 'Enter') {
            handleClick();
        }
    }
    const handleClick = e => {
        const newList = list.concat(parseInt(number));
        setList(newList);
        setNumber('');
    }

    const avg = useMemo(() => getAverage(list), [list]);
    
    
    return(
        <div>
            <h1>useMemo practice</h1>
            <input 
                value={number} 
                onChange={handleChange}
                onKeyPress={handleKeyPress}
            />
            <button onClick={handleClick}>register</button>
            <ul>
                {list.map((item,i) => <li key={i}>{item}</li>)}
            </ul>
            <div>average: {avg}</div>
        </div>
    );
}

export default Average;

---

References

• 리액트를 다루는 기술 (김민준)
• react.vlpt.us/basic/17-useMemo.html