React useCallback 함수 재사용하기
September 06, 2020
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 <MyBigList term={term} handleClick={handleClick} />
}
// Recreate increment on every change of delta!
const increment = useCallback(() => setC(c => c + delta), [delta])
const increment = useCallback(() => {
setCount(count + 1)
}, [count])
const decrement = useCallback(() => {
setCount(count - 1)
}, [count])
const incrementOtherCounter = useCallback(() => {
setOtherCounter(otherCounter + 1)
}, [otherCounter])
메모이제이션(memoization)
컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술
refernce