Memoization2 React useCallback 사용하기 useCallback const memoizedCallback = useCallback(() => { doSomething(a, b) }, [a, b]) 메모이제이션된 함수를 재사용 useCallback example import React, { useCallback } from "react" export default function MyParent({ term }) { const handleClick = useCallback( item => { console.log("You clicked ", item) }, [term] ) return } // Recreate increment on every change of delta! const increment = useCallback(() => setC(c.. 2020. 9. 21. React useMemo 사용하기 // a, b가 바뀔때만 리렌더링 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]) 메모이제이션된 값을 재사용 의존성 값 [a, b] 가 변경 되었을때 재계산하여 렌더링 시 고비용 계산을 방지 배열이 없을 경우 렌더링 때마다 새 값 계산 메모이제이션(memoization) 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 useMemo example import React, { useMemo } from "react" const users = [ { id: "a", name: "Robin" }, { id: "b.. 2020. 9. 21. 이전 1 다음
