const cache = {}
function slow(a) {
if (cache[a]) return cache[a]
const result = /* Complex logic */
cache[a] = result
return result
}
캐시에 정보가 있다면 복잡한 함수를 실행하지 않고 캐시에서 정보를 가져다 사용 할 수 있습니다.
const Memoized = React.memo(Component)
<!-- 새롭게 렌더링 -->
<Memoized num="{1}" />
<!-- 직전 elements를 사용 -->
<Memoized num="{1}" />
<!-- 새롭게 렌더링 -->
<Memoized num="{2}" />
<!-- 새롭게 렌더링 -->
<Memoized num="{1}" />
const MyComponent = React.memo(function MyComponent(props) {
/* props를 사용하여 렌더링 */
});
React.memo는 고차 컴포넌트(Higher Order Component)입니다.
React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우,
컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
이 코드는 computeExpensiveValue(a, b)를 호출합니다. 그러나 종속성 [a, b]가 마지막 값 이후로 변경되지 않은 경우 useMemo는 두 번째 호출을 건너뛰고 반환된 마지막 값을 재사용
합니다.
const handleReset = useCallback(() => {
return doSomething(a, b)
}, [a, b])
useMemo가 종속성 배열을 기반으로 값을 캐시한다면 useCallback은 값을 캐시하는 대신 함수를 캐시
하는 데 사용됩니다.
useMemo 와 useCallback의 주요 차이점 useMemo는 종속성이 변경될 때 마다 전달된 함수를 호출하고 해당 함수 호출의 값을 반환하는데 반해 useCallback은 전달 된 함수를 호출하지 않고 종속성이 변경 될 때마다 전달 된 함수의 새 버전을 반환합니다.
useCallback(() => {
return a + b
}, [a, b])
useMemo(() => {
return () => a + b
}, [a, b])
위와 같이 useCallback은 전달 된 함수를 반환하고, useMemo는 결과를 반환합니다.