240529 TIL

useMemo

오늘은 React에서 성능 최적화를 위해 사용되는 useMemo 훅에 대해 학습했습니다. useMemo는 컴포넌트의 불필요한 재연산을 방지하여 성능을 최적화하는 데 매우 유용합니다.

useMemo란 무엇인가?

useMemo는 React 훅으로, 특정 계산의 결과를 메모이제이션하여, 의존성 배열이 변경되지 않는 한 해당 계산을 재실행하지 않고 캐시된 값을 반환합니다. 이는 계산 비용이 큰 작업이나, 리렌더링 시 매번 재계산할 필요가 없는 경우에 유용합니다.

사용법

useMemo는 함수와 의존성 배열을 인자로 받습니다. 함수는 메모이제이션하고자 하는 계산을 포함하고, 의존성 배열은 언제 해당 계산이 다시 수행되어야 하는지를 결정합니다.

const memoizedValue = useMemo(() => {
    // 계산이 많이 드는 작업
    return computeExpensiveValue(a, b);
}, [a, b]);

예제: 정렬된 리스트

다음은 useMemo를 사용하여 성능을 최적화하는 예제입니다. items 배열이 변경될 때만 정렬을 다시 수행하고, 그렇지 않으면 캐시된 정렬 결과를 사용합니다.

import React, { useMemo } from 'react';

function SortedList({ items }) {
    const sortedItems = useMemo(() => {
        console.log('정렬 중...');
        return [...items].sort((a, b) => a - b);
    }, [items]);

    return (
        <ul>
            {sortedItems.map(item => (
                <li key={item}>{item}</li>
            ))}
        </ul>
    );
}

이 예제에서 items가 변경될 때만 정렬 연산이 실행되며, 이로 인해 불필요한 정렬 연산을 방지할 수 있습니다.

언제 useMemo를 사용해야 하는가?

useMemo는 모든 계산에 사용할 필요는 없으며, 다음과 같은 경우에 사용하면 좋습니다.

1. 비용이 큰 계산: 반복적으로 수행되기엔 비용이 큰 계산을 최적화할 때.
2. 참조 동등성 보장: 리렌더링 시 참조 동등성을 보장하여, 불필요한 리렌더링을 방지할 때.
3. 성능 최적화: 컴포넌트의 성능을 분석하고 최적화가 필요할 때.

주의사항

• 과도한 사용: useMemo를 과도하게 사용하면 코드의 복잡성이 증가할 수 있습니다. 불필요한 경우 사용을 피하는 것이 좋습니다.
• 의존성 배열: 의존성 배열을 정확하게 설정하지 않으면, 의도치 않은 리렌더링이 발생할 수 있습니다. 의존성 배열의 값을 정확히 지정하는 것이 중요합니다.
• 렌더링 최적화: useMemo는 렌더링을 최적화하지만, 비동기 작업이나 사이드 이펙트를 다루는 데는 적합하지 않습니다. 그런 경우에는 useEffect나 useCallback을 사용해야 합니다.

결론

useMemo는 React 컴포넌트의 성능 최적화를 위한 강력한 도구입니다. 특히 계산 비용이 큰 작업이나 참조 동등성을 보장해야 하는 경우에 유용합니다. 오늘 학습한 내용을 통해 useMemo를 적절히 사용하여 성능을 최적화하는 방법을 이해하게 되었습니다.