UseCallback, UseMemo에 대하여

Memoization

기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법

memoization을 적절히 적용하면 중복연산을 피할 수 있어 메모리를 더 쓰더라도 어플의 성능을 최적화할 수 있다.

useMemo

메모이제이션된 ‘값’을 반환한다.

dependency가 변하면 () ⇒ {} 함수를 실행하고 값을 반환

import React, { useState, useCallback, useMemo } from "react";

export default function App() {
  const [ex, setEx] = useState(0);
  const [why, setWhy] = useState(0);

  // useMemo 사용하기
  useMemo(() => {console.log(ex)}, [ex]);

  // 두 개의 버튼을 설정했다. X버튼만이 ex를 변화시킨다.
  return (
    <>
      <button onClick={() => setEx((curr) => (curr + 1))}>X</button>
      <button onClick={() => setWhy((curr2) => (curr2 + 1))}>Y</button>
    </>
  );
}

import React from "react";
import "./styles.css";

const getNumber = (number) => {
  console.log("숫자가 변동되었습니다.");
  return number;
};

const getText = (text) => {
  console.log("글자가 변동되었습니다.");
  return text;
};

const ShowState = ({ number, text }) => {
  const showNumber = getNumber(number);
  const showText = getText(text);

  return (
    <div className="info-wrapper">
      {showNumber} <br />
      {showText}
    </div>
  );
};

export default ShowState;

변경하고자 하는 state에 해당되지 않는 함수도 덩달아 실행되므로 비효율적이고 낭비?

이럴 때 useMemo를 사용

useCallback

useCallback함수는 dependency가 변하는 것이 아닌 새로운 func 함수를 반환한다.

import React, { useState, useCallback, useMemo } from "react";

export default function App() {
  const [ex, setEx] = useState(0);
  const [why, setWhy] = useState(0);

  // useCallback 이 () => {console.log(why)} 라는 함수를 반환한다.
  const useCallbackReturn = useCallback(() => {console.log(why)}, [ex]);

  // useCallback 이 담겨있는 함수를 실행
  useCallbackReturn()

  return (
    <>
      <button onClick={() => setEx((curr) => (curr + 1))}>X</button>
      <button onClick={() => setWhy((curr2) => (curr2 + 1))}>Y</button>
    </>
  );
}

가장 큰 차이점

useCallback은 dependency 가 변하면서 함수를 반환할 때, 새로운 함수를 반환하므로 함수가 다르다.