useMemo 및 useCallback은 불필요한 재렌더링을 방지하여 구성 요소 성능을 최적화하는 데 중요한 역할을 하는 두 가지 강력한 React 후크입니다. 개발자가 반응성이 뛰어나고 효율적인 React 애플리케이션을 만드는 데 필수적인 도구입니다.

이 가이드에서는 useMemo와 useCallback의 유사점과 차이점을 설명합니다. 우리는 그것들을 구현하는 방법과 각 것을 언제 사용하는지 이해할 것입니다.

왜 useMemo나 useCallback을 사용해야 할까요?

일반적으로 React에서는 대부분의 계산이 빠르지만 때로는 매우 큰 배열에 대한 계산이 있거나 모든 재렌더링에서 실행할 필요가 없는 값비싼 계산이 있습니다.

useMemo 및 useCallback 후크는 재렌더링 사이에 비용이 많이 드는 계산을 캐시하여 이 문제를 해결하는 데 도움이 될 수 있습니다.

useMemo가 무엇이고 어떻게 사용하는지.

useMemo는 재렌더링 사이의 계산 결과를 캐시하는 React 후크이며 두 개의 인수를 사용합니다:

• CalculatedValue: 캐시하려는 값을 계산하는 함수입니다. 함수는 어떠한 매개변수도 허용해서는 안 되며 순수해야 하며 모든 유형의 값을 반환해야 합니다. React는 종속성이 변경되지 않은 경우 동일한 계산 결과를 반환하고, 그렇지 않으면 새 결과를 계산하여 캐시합니다.
• 종속성: 상태 변수 상수 및 함수 호출에서 CalculatedValue 내부에 있는 모든 반응 값 참조 목록입니다. React는 Object.it 비교를 사용하여 각 반응 값을 이전 값과 비교하려고 시도합니다.

useMemo 사용

재렌더링 사이의 계산을 캐시하려면 구성 요소의 최상위 수준에서 useMemo 후크로 래핑합니다.

useMemo(fn, 종속성)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

useMemo의 첫 번째 매개변수는 매개변수가 없는 함수입니다.

처음 React는 useMemo의 첫 번째 매개변수의 결과 값을 계산하고, 그런 다음 종속성 목록인 두 번째 매개변수를 메모합니다. React는 다시 렌더링하는 동안 계산된 결과를 캐시하고 종속성 값 중 하나가 변경될 때만 결과를 다시 계산합니다.

useCallback이 무엇이고 어떻게 사용하는지.

useCallback 후크는 값을 계산하지 않고 함수(useCallback의 첫 번째 매개변수)를 캐시한다는 점만 다른 useMemo 후크와 동일합니다. 또한 이 함수는 useMemo와 달리 매개변수를 허용할 수 있습니다.

useCallback을 사용하려면 매개변수를 전달해야 합니다.

• 캐시해야 하는 함수 정의입니다.
• 종속성 목록

const 캐시된Fn = useCallback(fn, 종속성)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

useCallback 대신 useMemo를 사용해야 하는 경우

계산 결과 최적화가 주된 관심사라면 useMemo를 사용하세요.
함수 변경으로 인한 불필요한 재렌더링을 방지하는 것이 주된 관심사라면 useCallback.

구성 요소 다시 렌더링 건너뛰기

때때로 다시 렌더링해야 하는 상위 구성 요소가 있을 수 있으며 이로 인해 하위 구성 요소도 다시 렌더링됩니다. 메모를 사용하여 컴포넌트를 캐시할 수 있습니다.

테마 상태가 있는 Todolist 구성 요소와 하위 구성 요소인 List 구성 요소가 있다고 가정해 보겠습니다. 테마 상태가 변경될 때마다 필요하지 않은 목록 구성 요소가 다시 렌더링됩니다. 이 문제를 해결하려면 메모를 사용하세요.

리스트의 기능적 구성요소를 메모로 래핑합니다.

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

결론

이 포괄적인 가이드에서는 useMemo 및 useCallback 후크, 각각의 사용 방법, 각각의 사용 시기, React 애플리케이션 성능 최적화를 위한 이점을 설명했습니다.