[231012] useMemo , useCallback

useMemo , useCallback

• 성능 최적화를 위한 훅 함수
• 둘 다 메모이제이션을 하고 새로 계산하는 것을 방지하여 컴포넌트의 렌더링 성능을 향상시키는 데 도움을 준다.
• 남발하면 성능이 떨어짐, 메모리 할당하기 때문에 (참고: https://velog.io/@lky5697/stop-using-usememo-now)

useMemo

• 값을 메모이제이션 (원시값)
• 복잡한 메모 여러번 하지 않기 위해 사용

import { useMemo } from "react"

function MyComponent({ data }) {
  // data가 변경될 때만 expensiveCalculation 함수를 다시 실행
  const result = useMemo(() => {
    return expensiveCalculation(data)
  }, [data])

  return <div>{result}</div>
}

useCallback

• 콜백함수 (참조값에 대한 것)
• useCallback 을 쓰더라도 부모가 리렌더링되면 자식도 리렌더링 된다.
• 결과적으로, 자식 컴포넌트를 react memo 로 바꿔야 자식컴포넌트가 useCallback을 사용하고 있는 콜백함수도 메모이제이션이 제대로 됨

import { useCallback } from "react"

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    // 클릭 이벤트 핸들러
  }, []) // 빈 의존성 배열: 핸들러는 항상 동일한 함수를 반환

  return <button onClick={handleClick}>Click Me</button>
}