useMemo와 useCallback의 차이점

안녕하세요! 오늘은 React에서 성능 최적화를 위해 자주 사용하는 두 가지 훅인 useMemo와 useCallback에 대해 알아보겠습니다. 이 두 훅은 각각의 사용 목적과 방법에서 차이가 있지만, 모두 성능을 최적화하는 데 중요한 역할을 합니다.

useMemo와 useCallback의 차이점

1. useMemo

정의

useMemo는 연산 비용이 높은 함수의 결과를 메모이제이션하여 성능을 최적화하는 훅입니다. 의존성 배열이 변경되지 않는 한, 이전에 계산된 결과를 반환합니다.

사용 예제

import React, { useMemo } from 'react';

function ExpensiveComputation({ num }) {
    const compute = (n) => {
        console.log('Computing...');
        return n * 2;
    };

    const result = useMemo(() => compute(num), [num]);

    return <div>Result: {result}</div>;
}

주요 용도

• 연산 비용이 높은 함수의 결과를 캐싱하여 불필요한 재계산을 방지
• 컴포넌트의 리렌더링 시 성능 최적화

2. useCallback

정의

useCallback은 함수를 메모이제이션하여 성능을 최적화하는 훅입니다. 의존성 배열이 변경되지 않는 한, 동일한 함수 객체를 반환합니다.

사용 예제

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ handleClick }) => {
    console.log('Button rendered');
    return <button onClick={handleClick}>Increment</button>;
});

function App() {
    const [count, setCount] = useState(0);

    const increment = useCallback(() => {
        setCount(count + 1);
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <Button handleClick={increment} />
        </div>
    );
}

주요 용도

• 컴포넌트의 리렌더링을 방지하기 위해 콜백 함수를 메모이제이션
• 자식 컴포넌트에 함수를 props로 전달할 때 불필요한 리렌더링 방지

3. useMemo와 useCallback의 차이점

특성	useMemo	useCallback
반환 값	값 (계산된 결과)	함수
주요 목적	연산 비용이 높은 계산의 결과를 메모이제이션	함수를 메모이제이션하여 리렌더링 방지
사용 시기	복잡한 계산이 필요할 때	자식 컴포넌트에 콜백 함수를 전달할 때

예시 비교

import React, { useMemo, useCallback, useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    // useMemo 사용 예시
    const memoizedValue = useMemo(() => {
        return count * 2;
    }, [count]);

    // useCallback 사용 예시
    const memoizedCallback = useCallback(() => {
        setCount(count + 1);
    }, [count]);

    return (
        <div>
            <p>Memoized Value: {memoizedValue}</p>
            <button onClick={memoizedCallback}>Increment</button>
        </div>
    );
}

export default Example;

위 예시에서 useMemo는 계산된 값을 캐싱하고, useCallback은 함수를 캐싱합니다. 이 둘을 적절히 사용하면 컴포넌트의 리렌더링을 최소화하고, 성능을 최적화할 수 있습니다.

결론

useMemo와 useCallback은 React에서 성능을 최적화하는 데 중요한 역할을 하는 두 가지 훅입니다. useMemo는 연산 비용이 높은 함수의 결과를 캐싱하는 데 사용되며, useCallback은 함수를 메모이제이션하여 불필요한 리렌더링을 방지합니다. 이 두 훅을 적절히 사용하여 성능을 최적화하고, 보다 반응성이 좋은 React 애플리케이션을 개발해 보세요.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.