[React] useMemo와 useCallback

useMemo와 useCallback은 React Hooks API의 일부로 두 가지 모두 성능 최적화에 사용됩니다.

useMemo

useMemo는 계산에 많은 시간이 걸리는 함수의 결과값을 기억합니다. 그리고 해당 함수가 다시 실행될 때마다 결과값이 계산되는 것을 방지합니다.

예를 들어, 다음과 같은 코드가 있을 때:

const myList = [1, 2, 3, 4, 5]
const total = useMemo(() => {
  console.log('Calculating total...')
  return myList.reduce((acc, curr) => acc + curr, 0)
}, [myList])

위 코드에서 myList 배열이 변경될 때마다 새로운 배열을 생성하고, 이전과 다른 참조값을 가지게 됩니다. 그러면 total 값도 변경됩니다. 따라서 useMemo를 사용하면 myList가 변경되더라도 total 값이 변경되지 않고, 이전 결과값을 사용할 수 있습니다.

useCallback

useCallback은 함수를 생성하고, 해당 함수를 기억합니다. 그리고 해당 함수가 다시 실행될 때마다 새로운 함수를 생성하는 것을 방지합니다.

예를 들어, 다음과 같은 코드가 있을 때:

const handleClick = useCallback(() => {
  console.log('Button clicked!')
}, [])

위 코드에서 handleClick 함수가 다시 실행될 때마다 새로운 함수를 생성하지 않고, 이전 함수를 사용합니다. 이것은 useMemo와 비슷하게 동작하지만, 함수를 기억하는 것이라는 점에서 차이가 있습니다.

결론

useMemo와 useCallback은 모두 성능 최적화에 사용되는 React Hooks API입니다. useMemo는 함수의 결과값을 기억하고, useCallback은 함수 자체를 기억합니다. 이 두 가지를 적절히 사용하여 React 애플리케이션의 성능을 개선할 수 있습니다.