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 <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)

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술