20221102 React Hooks - useMemo, useCallback

Hook의 규칙

• React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함)
• 구성 요소의 최상위에서만 호출할 수 있음
• 조건문, 반복문 안에서 못 씀

useMemo, useCallback

성능 문제를 개선하기 위해 사용

useMemo는 특정 결과값을 재사용할 때 사용

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용

 

memoization (메모이제이션)

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

- 자주 필요한 값을 캐싱해 두어서 그 값을 다시 계산하는게 아니라 캐시를 꺼내 쓰는 것

 

useMemo

• 함수형 컴포넌트가 렌더링이 될 때 > Component 함수 호출 > 모든 내부 변수 초기화
• memoization을 사용하면 렌더링 할때 재사용함 >  최적화는 모든 렌더링 시의 고비용 계산을 방지
• useMemo로 전달된 함수는 렌더링 중에 실행
• 콜백함수와, 의존성배열[]을 가짐
• 메모이제이션된 '값'을 반환

import { useState, useMemo } from "react";
import ReactDOM from "react-dom/client";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  //useMemo 첫번째 인자 콜백함수, 두번째인자 의존성배열 []
  const calculation = useMemo(() => expensiveCalculation(count), [count]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 

 

useCallback

• useMemo와 유사함 대신 인자로 전달한 콜백함수 그 자체를 메모이제이션 함
• 콜백함수와, 의존성배열[]을 가짐
• 메모이제이션된 '함수'를 반환

함수를 매번 새로 생성하는 것이 아니라 디펜던시 리스트가 변경될 때만 함수를 생성

const handleLoad = useCallback((option) => {
  // ...
}, [dep1, dep2, dep3, ...]);

 

 

참고 및 출처

https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98

메모이제이션 - 위키백과, 우리 모두의 백과사전

https://ko.reactjs.org/docs/hooks-reference.html#usememo

https://www.w3schools.com/react/react_usememo.asp

https://ko.reactjs.org/docs/hooks-reference.html#usecallback

https://www.w3schools.com/react/react_usecallback.asp