최적화 (1) - useMemo

UseMemo의 필요성

• 리렌더링시, 불필요한 연산을 다시 하지 않도록 연산의 결과를 저장한다.

UseMemo를 사용하지 않은 경우

• count라는 state가 변경되면서 UseMemoPrac 컴포넌트가 리렌더링 된다.
• = UseMemoPrac라는 함수가 다시 호출된다.
• = 내부 변수가 초기화 된다.
• = plusBigNum 함수가 호출되면서 inputSum이 계산된다.
• count가 변경될 때마다 count와 전혀 관련없는 연산(plusBigNum 함수 호출)이 이루어진다!

import { useState } from "react";

const plusBigNum = (number) => {
    console.log("오래 걸리는 연산");
    return number + 59875153;
};

const UseMemoPrac = () => {
    const [inputValue, setInputValue] = useState(1);
    const [count, setCount] = useState(0);
    const newNum = plusBigNum(inputValue);

    return (
        <div>
            <h1>useMemo</h1>
            <h2>계산기</h2>
            <input
                type="number"
                value={inputValue}
                onChange={(e) => {
                    setInputValue(parseInt(e.target.value));
                }}
            />
            <span> + 59875153 = {newNum}</span>
            <h2>카운터</h2>
            <p>{count}</p>
            <button
                onClick={() => {
                    console.log("count 변경 (+)");
                    setCount(count + 1);
                }}
            >
                +
            </button>
            <button
                onClick={() => {
                    console.log("count 변경 (-)");
                    setCount(count - 1);
                }}
            >
                -
            </button>
        </div>
    );
};

UseMemo 사용한 경우

• count라는 state가 변경되면서 UseMemoPrac 컴포넌트가 리렌더링될 때,
  이미 연산되어 저장된 값을 재사용하기 때문에 plusBigNum 함수를 실행하지 않는다.
• inputValue 값이 변경될 때만 plusBigNum 함수를 실행한다.

import { useState, useMemo } from "react";

const plusBigNum = (number) => {
    console.log("오래 걸리는 연산");
    return number + 59875153;
};

const UseMemoPrac = () => {
    const [inputValue, setInputValue] = useState(1);
    const [count, setCount] = useState(0);
    const newNum = useMemo(() => {
        return plusBigNum(inputValue);
    }, [inputValue]);

    return (
        <div>
            <h1>useMemo</h1>
            <h2>계산기</h2>
            <input
                type="number"
                value={inputValue}
                onChange={(e) => {
                    setInputValue(parseInt(e.target.value));
                }}
            />
            <span> + 59875153 = {newNum}</span>
            <h2>카운터</h2>
            <p>{count}</p>
            <button
                onClick={() => {
                    console.log("count 변경 (+)");
                    setCount(count + 1);
                }}
            >
                +
            </button>
            <button
                onClick={() => {
                    console.log("count 변경 (-)");
                    setCount(count - 1);
                }}
            >
                -
            </button>
        </div>
    );
};