react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 useMemo

• useMemo를 이용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.
• useMemo의 첫번째 인자로 어떻게 연산할지 정의하는 함수를 넣고, 두번째 인자로 deps 배열을 넣어준다.
• deps 배열 안에 넣은 내용이 바뀌면, 첫번째 인자의 함수를 호출하여 연산을 진행하고, 만약 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용한다.

예시

const getAverage(numbers){
    console.log("평균값 계산중...");
    if (numbers.length === 0)  return 0;
    const sum = numbers.reduce((value, number) => value + number);
    return sum / numbers.length;
};


const Average = () => {
    const [list, setList] = useState([]);
    const [number, setNumber] = useState("");
    
    const onChange = (e) => {
        setNumber(e.target.value);
    };
    
    const onInsert = () => {
        setList(list.concat(parseInt(number));
        setNumber("");
    }
    
    return (
        <div>
            <input
                type="text"
                name="number"
                value={number}
                onChange={onChange}/>
            <button onClick={onInsert}>등록</button>
            <ul>
                {list.map((value, index) => (<li key={index}>{value}</li>))}
            </ul>
            <div>평균값: {getAverage(list)}</div>
        </div>
    );

}

• 문제점: 숫자를 등록했을 뿐만 아니라 인풋 내용이 수정될 때도 평균값을 계산하는 함수가 호출된다. 왜냐하면 인풋 내용이 수정되었을 때 리렌더링되므로 함수가 다시 호출되는 것이다. 하지만 인풋 내용이 바뀔 때에는 평균값을 계산할 필요가 없다.
• useMemo를 이용하면 이러한 작업을 최적화할 수 있다. 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았을 때는 이전에 연산했던 결과를 재사용한다.

import { useMemo } from "react";
const avg = useMemo(() => getAverage(list), [list]);
// list 배열의 내용이 바뀔 때만 함수 호출