React에서 useMemo와 useCallback을 언제 사용하나요?

이 두 개의 React 후크useMemo 및 useCallback는 비용이 많이 드는 작업(즉, CPU와 같이 매우 복잡하고 많은 시간과 리소스를 사용하는 작업)을 처리할 때 유용합니다.

React 구성 요소 내에 비용이 많이 드는 작업 중 하나를 포함하면 구성 요소가 다시 렌더링될 때마다 이러한 비용이 많이 드는 작업이 실행되어 애플리케이션 속도가 느려집니다.

이 두 후크는 비용이 많이 드는 작업을 실행하고 결과를 캐시에 저장하여 앱을 최적화하는 데 도움이 됩니다. 다음에 구성 요소가 다시 렌더링되면 작업이 실행되지 않습니다. 대신 캐시에서 결과를 반환합니다.

이것이 useMemo가 작동하는 방식입니다

비용이 많이 드는 작업과 이를 사용하는 React 구성 요소가 있다고 가정해 보겠습니다.

function uselessExpensiveOperation(input) {
    const someBigArray = [];
    for (let i = 0; i < 5_000_000; i++) {
        someBigArray.push(input * i);
    }
    return someBigArray;
}

function SomeReactComponent() {
    const expensiveOperationResult = uselessExpensiveOperation(3);
    const output = expensiveOperationResult
        .slice(0, 5)
        .map(number => <li key={ number }>{ number }</li>);

    return <ul>{ output }</ul>;
}

이 예제 함수는 실행하는 데 몇 초가 걸릴 수 있습니다. 각 숫자의 값이 인수로 전달하는 숫자에 따라 달라지는 5,000,000개의 숫자 배열을 반환합니다. React 구성 요소에서 직접 uselessExpensiveOperation를 사용하는 경우 React는 렌더링 프로세스 중에 해당 구성 요소를 호출할 때마다 비용이 많이 드는 작업을 실행합니다.

이제 useMemo 후크를 사용하여 값을 캐시에 저장하면 다음과 같이 됩니다.

function SomeReactComponent() {
    const expensiveOperationResult = useMemo(
        function() {
            return uselessExpensiveOperation(3);
        },
        []
    );
    const output = expensiveOperationResult
        .slice(0, 5)
        .map(number => <li key={ number }>{ number }</li>);

    return <ul>{ output }</ul>;
}

useMemo의 첫 번째 인수는 비용이 많이 드는 작업을 포함하는 함수이고 두 번째 인수는 종속성의 배열입니다. 종속성 값이 변경되면 React는 캐시를 삭제하고 비용이 많이 드는 작업을 실행합니다.

종속성 배열의 아이디어는 비용이 많이 드는 작업에 필요한 변수를 포함해야 한다는 것입니다. 예제에서 비용이 많이 드는 작업에는 종속성이 없으므로 배열이 비어 있습니다.

useCallback 후크를 사용하는 방법

이 후크는 useMemo 와 매우 유사하지만 캐시에 기능을 저장합니다. useMemo 를 사용하여 이를 수행할 수 있지만 구문은 useCallback 를 사용하는 것이 조금 더 쉽습니다.

function SomeReactComponent() {
    const cachedFunction = useCallback(
        function originalFunction() {
            return "some value";
        },
        []
    );

    return <div>{ cachedFunction() }</div>
}

이제 언제 사용해야합니까? 먼저 특별한 React 함수인 React.memo에 대해 설명하겠습니다. 이 함수는 useMemo 와 같이 작동하지만 불필요한 렌더링을 방지하기 위해 React 구성 요소를 캐시에 저장합니다. 작동 방식은 다음과 같습니다.

const cachedComponent = React.memo(
    function SomeReactComponent(props) {
        return <div>Hello, { props.firstName }!</div>
    }
);

구성 요소는 일부 소품이 변경될 때까지 캐시에 저장됩니다. 그런 일이 발생하면 다시 렌더링하고 캐시에 다시 저장합니다.

그러나 소품 중 하나가 부모 구성 요소에서 생성된 함수인 경우 문제가 있습니다. 상위 구성 요소가 다시 렌더링될 때마다 내부 함수가 다시 생성되고 코드가 변경되지 않은 경우에도 다른 함수로 간주됩니다.

따라서 캐시된 구성 요소에 "다른"함수를 prop으로 전달하면 불필요한 재렌더링이 트리거됩니다.
useCallback 후크를 사용하는 경우 구성 요소가 처음 렌더링될 때만 함수를 생성합니다. 구성 요소가 다시 렌더링되면 캐시에서 함수를 검색하고 이번에는 동일한 함수가 되며 하위 구성 요소에서 다시 렌더링을 트리거하지 않습니다.

과도하게 최적화하지 마십시오

일부 개발자가 흔히 저지르는 실수는 성능 문제를 방지하기 위해 필요하지 않은 경우에도 이러한 후크(및 기타 최적화 기술)를 사용하는 것입니다. 그러나 이는 코드를 더 복잡하게 만들고(따라서 유지 관리하기 더 어렵게 만들고) 경우에 따라 성능이 더 나빠지기 때문에 권장되지 않습니다.

성능 문제를 찾은 후 이러한 기술을 적용해야 합니다. 원하는 만큼 빠르게 실행되지 않는 경우 병목 현상이 있는 부분을 조사하고 해당 부분을 최적화합니다.


무료 자바스크립트 뉴스레터! 격주 월요일, 자바스크립트 기술 수준을 높이기 위한 쉽고 실행 가능한 단계. Click here to subscribe