useMemo & useCallback

🧐 컴포넌트 렌더링 과정

컴포넌트가 렌더링 된다는 것은 그 함수(컴포넌트)를 호출하여서 실행(rendering)되는 것을 말한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 함수 등)도 매번 다시 선언되어 사용된다.

컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었거나, 부모 컴포넌트가 렌더링 될 때마다 리렌더링 된다.
(심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 됨. )

즉, 리렌더링이 필요없는 변수, 함수들마저 같이 재렌더링되므로 낭비, 비효율적이다.
(컴포넌트에서 렌더링 결과에 전혀 영향을 미치지 않는 변경사항이 발생하게 된다면, 불필요한 렌더링이 발생 하므로 성능 손실이 발생한다. 이는 렌더링에서 수행하는 로직이 많을 수록, 많은 컴포넌트를 출력할 수록 손실은 배가 된다.)

---

🧐 메모이제이션(memoization)의 개념

"메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다."

• 기본 개념
  • useMemo와 useCallback은 메모이제이션 기능을 지원하는 리액트의 내장 훅(hook)으로, 퍼포먼스 최적화를 위하여 사용된다.
  • useMemo는 메모이제이션된 값을 반환한다.(값을 기억한다)
  • useCallback은 메모이제이션된 콜백(=함수)을 반환한다.(함수를 기억한다)
  • useMemo와 useCallback은 2개의 인자를 갖는다.
    • 첫번째 인자: 계산된 값을 return하는 callback 함수
    • 두번째 인자: useMemo, useCallback에게 언제 다시 계산해야할지 알려 줄 dependency 리스트 배열
      (🌲 두 번째 인수로 전달된 의존성이 변경되기 전까지 기억. 두번째 인자에 변경될 데이터의 값(state 또는 함수)이 들어오기 전까지는 update가 안된다.)
  • useCallback(fn, deps) / useMemo(() => fn, deps)와 같다고 한다.

    // use memo
    const memoizedValue = useMemo(() => value(a,b), [a,b]);  // 메모이제이션 된 값
    const memoizedCallback = useCallback(() => fn(a,b), [a,b]);  // 메모이제이션 된 콜백

    ❗️ 두번째 인자(=deps)로 빈배열([])을 넣으면 어떤 상태 값에도 반응하지 않으며, 모든 상태 변화에 반응한다(모든 렌더링에 변화 없이 저장된 값을 불러오는 셈.)

• 리액트는 메모이제이션을 위한 세개의 api를 제공.

  • memo
  • useMemo
  • useCallback

• 리액트 메모이제이션 특징 : 바로 이전의 값만 메모이제이션 한다

• 메모이제이션 이유

  • 복잡한(메모리 소모적) 연산을 반복하는 것을 피하여 성능을 향상시킨다.
  • 안정된 값 제공

---

⛱ useMemo

• useMemo()는 2개의 인자를 받는다.
  첫 번째는 결과 값을 생성해주는 팩토리함수이고,
  두 번째는 결과값을 재활용할 때 기준이 되는 입력값 배열이다.
• 값을 반환(return)한다

// 일반 React 함수형 컴포넌트
function Component() {
  const [count, setCount] = useState(0)
  const doubleCount = count * 2   // 두배로 계산한 값 출력

  return (
    <>
      <button onClick={() => setCount(count + 1)}> 카운트 </button>
    </>
  )
}



// useMemo 사용
import React, {useMemo} from 'react';

function Component() {
  const [count, setCount] = useState(0)
  const doubleCount = useMemo(() => count * 2, [count])
  // 값 자체에 useCallback 사용

  return (
    <>
      <button onClick={() => setCount(count + 1)}> 카운트 </button>
    </>
  )
}

---

⛱ useCallback

• useCallback()는 2개의 인자를 받는다.
  첫 번째는 결과 값을 생성해주는 팩토리함수이고,
  두 번째는 결과값을 재활용할 때 기준이 되는 입력값 배열이다.

// 일반 React 함수형 컴포넌트
function Component() {
  const [count, setCount] = useState(0)
  const handleClick = () => console.log('clicked!')

  return (
    <>
      <button onClick={() => setCount(count + 1)}> 카운트 </button>
      <button onClick={handleClick}>클릭해보세요!</button>
    </>
  )
}


// useCallback 사용
function Component() {
  const [count, setCount] = React.useState(0)
  const handleClick = useCallback(
    () => console.log('clicked!'),
  []) 
  // 함수 자체에 useCallback 사용

  return (
    <>
      <button onClick={() => setCount(count + 1)}> 카운트 </button>
      <button onClick={handleClick}>클릭해보세요!</button>
    </>
  )
}