React - 성능 최적화를 위해 사용하는 두 가지 Hook, useMemo & useCallback

성능 최적화 Hook - useMemo & useCallback

useMemo와 useCallback은 React에서 성능 최적화를 위해 사용하는 Hook이다.
둘 다 불필요한 재연산이나 재생성을 방지하여 컴포넌트 성능을 개선하는데 도움을 주는 비슷한 특징을 가지고 있지만 엄연히 용도가 다르다.

useMemo

useMemo는 특정 값의 계산 결과를 메모이제이션하여 불필요한 계산을 방지한다.
주로 비용이 높은 로직의 계산을 캐싱하거나 리렌더링 시 동일한 참조값을 유지해야할 때 사용된다.

구조

const memoValue = useMemo(() => {
    return num * num
}, [num]);

• 첫 번째 매개변수: 계산 로직(num * num)
• 두 번째 매개변수: 의존성 배열([num])
  -의존성 배열 내 값들이 변경될 때만 함수가 실행되고 새 값을 계산한다.
  -값이 변경되지 않으면 이전 계산 값을 재사용한다.

사용 예시

1. 비용이 높은 로직(비싼 연산)

• num이 변경되지 않으면 squaredNum함수는 재실행되지 않는다.
• useMemo가 없다면 매 렌더링마다 계산이 실행된다.

import React, { useMemo } from 'react';

const MyComponent = ({ num }) => {
  const squaredNum = useMemo(() => {
    console.log('Calculating squared number...');
    return num * num; // 예시용 계산
  }, [num]);

  return <div>Squared Number: {squaredNum}</div>;
};

2. 참조 값 동일성 유지

• 객체를 다시 생성하지 않고 동일한 참조를 유지하여, 의존성 검사를 안정적으로 할 수 있다.

const samevalue = useMemo(() => ({ key: value }), [value]);

useCallback

useCallback은 특정 함수를 메모이제이션하여 불필요한 함수 재생성을 방지한다.
자식 컴포넌트에 함수를 props로 전달하거나, 이벤트 핸들러의 동일성을 유지해야할 때 유용하다.

구조

const handleClick = useCallback(() => {
    someFunction(word);
}, [word]);

• 첫 번째 매개변수: 실행할 함수(someFunction(word))
• 두 번째 매개변수: 의존성 배열([word])
  -의존성 배열 내 값들이 변경될 때만 새 함수가 생성된다.

실행 예시

1. 이벤트 핸들러 최적화

• handleClick 함수는 항상 동일한 참조를 유지하므로 리렌더링 시 불필요하게 새로 생성되지 않는다.

import React, { useCallback } from 'react';

function Example({ onClick }) {
  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);

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

2. 자식 컴포넌트 최적화

• handleClick 함수가 동일성을 유지하므로 MyComponent는 불필요한 랜더링을 방지한다.

import React, { useCallback } from 'react';

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

  return <MyComponent onClick={handleClick} />;
};

const MyComponent = ({ onClick }) => {
  return <button onClick={onClick}>Click Me</button>;
};

비교

특성	useMemo	useCallback
용도	계산 결과를 메모이제이션	함수를 메모이제이션
반환 값	계산된 값 (예: 숫자, 객체, 배열 등)	메모이제이션된 함수
적용 대상	비싼 계산, 객체/배열의 참조 안정화	이벤트 핸들러, 자식 컴포넌트에 전달되는 콜백 함수
예시	useMemo(() => a + b, [a, b])	useCallback(() => setCount(c => c + 1), [])
의존성 배열	계산에 필요한 값들	함수 내부에서 사용하는 값들
주요 이점	값 재계산 방지	함수 재생성 방지

사용 시 주의사항

1. 불필요한 사용 지양

• React는 기본적으로 최적화되어 있으므로, useMemo와 useCallback을 남용하면 코드가 복잡해질 수 있다.
• 값이나 함수가 정말 비싸거나, 참조 동일성이 중요한 경우에만 사용하자.

2. 의존성 배열 관리

• 의존성 배열이 올바르지 않으면 예상치 못한 동작을 초래할 수 있다.