[Hooks] useMemo vs useCallback

1. useMemo

Memoization

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장하여, 불필요한 계산의 반복을 제거하여 프로그램의 실행 속도를 빠르게 한다.

useMemo

useMemo는 변화가 이루어 지지 않은 값이 다시 렌더링 될때 이전에 기억한 값을 가져와 사용하겨 재 랜더링 되는 것을 막아줄 수 있는 Hook이다.

(1) useMemo구조

• 콜백함수, 배열 2개의 인자를 받는다.

(2) 계산기예시 by.노마더

⏩ 어려운 계산기

• hardSum을 계산을 위해 hardCalculate 함수를 실행시킨다.
• hardCalculate함수응 for을 999999999번 반복하기 때문에 매번 오랜 시간이 걸린다.
• easySum 계산하는 경우에도 오랜 시간이 걸린다.
  why❓
• 그 이유는, App 컴포넌트가 함수형 컴포넌트이기 때문이다.
• 쉬운 계산기 숫자가 변하면 easyNumber가 변하는 것이고, 그것은 state가 변한다는 것인데, state가 변하는 것은 App 컴포넌트가 다시 렌더링 된다는 것이다.
• 렌더링이 이루어지면 hardSum, easySum 모두 초기화가 된다.

⏩ 쉬운 계산기

• [] 배열 내부에 있는 값이 변경될 때만 hardCalculate 함수가 return 되어 hardSum에 새 값이 할당된다.
• [] 배열 내부 값에 변경 안되면 hardSum에 메모이제이션 된 값을 사용한다.

2. useCallback

(1) useCallback구조

• 콜백함수, 배열 2개의 인자를 받는다.

(2) 계산기예시 by.노마더

⏩ useCallback 미사용

• number를 변화시키면 useEffect가 실행된다.
• number가 변하면 App 컴포넌트가 재 랜더링 되기 때문에 someFunction이 랜더링 되고, useEffect가 실행한다.

⏩ useCallback 사용

• 처음 App componet가 연결 됬을때의 값이 메모이제이션 된다.
• 메모이 제이션 된 값이 someFunction에 할당되어 재사용된다.
• 더 이상 number가 변해도 useEffect가 발생하지 않는다.
• 하지만 현재 useCallback의 배열이 빈 배열이기 때문에 메모이제이션 된 함수 값(console.log("someFunc: number: ${number}")이 변하지 않는다.

⏩ useCallback 배열 값

• 이제 number state가 변하기 될 때마다 someFunction에 함수 값이 새롭게 메모이제이션된다.

💯 두 hook의 차이