useMemo는 컴포넌트를 최적화 시키는 hook중 하나

기존에 수행한 연산의 결과값을 저장하고 동일한 입력이 들어오면 재사용 하는 기법

• 주로 복잡한 로직 및 시간이 많이 걸리는 로직에서 최적화를 위해 사용함

필요 상황(1) - 극단적인 반복문

const hardCalculator = (num) => {
    console.log('어려운 계산');
    for(let i = 0; i < 1999999999; i++){

        // blank
    }
    return num + 10000;
}

function App() {

const [hardNumber, setHardNumber] = useState(0);
const hardSum = hardCalculator(hardNumber);     

console.log(hardSum);
return(
	// 컴포넌트 생성
)}

해당 예시의 함수에서는 한번 렌더링을 하기 위해서 수많은 반복문을 돌게 된다.

• state값의 변화가 생길 때 마다 재실행됨
• 지역변수는state가 변화될 때마다 다시 초기화 된다.

필요 상황(2) - 단순한 계산과 어려운 계산

const hardCalculator = (num) => {
    console.log('어려운 계산');
    for(let i = 0; i < 1999999999; i++) {

        //blank
    }
    return num + 10000;
}

const easyCalculator = (num) => {
    console.log('쉬운 계산');
    return num + 1;
}

function App() {

    /* 시간이 얼마 걸리지 않는 연산과 관련된 state 및 지역변수와 함수를 추가한다. */
    const [hardNumber, setHardNumber] = useState(1);
    const [easyNumber, setEasyNumber] = useState(1);

    const hardSum = hardCalculator(hardNumber);
    const easySum = easyCalculator(easyNumber);
return(
	// 컴포넌트 생성
)}

해당 예시에는 시간이 얼마 걸리지 않는 연산을 수행해서 state가 바뀔 때도 다시 화면을 렌더링 하기 위해 해당 App 함수를 다시 실행

• 지역변수를 초기화하기 위한 어려운 계산과 쉬운 계산 함수를 둘 다 다시 실행하는 구조

useMemo를 사용한 성능 개선

• useMemo 또한 대부분의 hooks와 동일하게 객체구조분해 할당으로 변수화 가능하다.

const {useState, useMemo} = React;

const hardCalculator = (num) => {
    console.log('어려운 계산');
    for(let i = 0; i < 1999999999; i++) {
        //blank
    }
    return num + 10000;
}

const easyCalculator = (num) => {
    console.log('쉬운 계산');
    return num + 1;
}

function App() {

    const [hardNumber, setHardNumber] = useState(1);
    const [easyNumber, setEasyNumber] = useState(1);

    const hardSum = useMemo(() => {
        return hardCalculator(hardNumber);
    }, [hardNumber]);

    const easySum = useMemo(() => {
        return easyCalculator(easyNumber);
    }, [easyNumber]);
   
    return (
//컴포넌트 생성
)}

간단한 작업을 할 때도 시간이 오래 걸리는 작업까지 함께 수행하기에는 너무 비효율적이기 때문에 어려운 연산을 통해 나온 값을 메모리 상에 저장(캐싱)해 두고, 그 값이 변경되지 않을 때는 다시 렌더링(연산)되지 않도록 한다.

• state 별로 역할을 나눈다고 생각해도 괜찮다.
• ex) 어려운 연산을 useMemo 설정 시, 쉬운 연산만 값의 변화를 주어 렌더링 시키면 쉬운 연산만 돌아가므로 속도가 매우 빠름

단, 어려운 계산만 useMemo를 사용한다면, 어려운 계산을 연산 처리 할 때 쉬운 연산도 같이 돌아가므로 state를 관리하는 각각 useMemo 설정을 하는 것이 좋다.