기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
memoization을 적절히 적용하면 중복연산을 피할 수 있어 메모리를 더 쓰더라도 어플의 성능을 최적화할 수 있다.
메모이제이션된 ‘값’을 반환한다.
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함수는 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 가 변하면서 함수를 반환할 때, 새로운 함수를 반환하므로 함수가 다르다.