[react hooks] 2. useMemo()

useMemo()

리액트의 useMemo는 함수 컴포넌트 내에서 계산 결과를 메모이제이션하는 훅이다. 메모이제이션은 이전에 계산된 결과를 저장해 두었다가 동일한 입력에 대해 다시 계산하지 않고 저장된 결과를 반환함으로써 성능을 최적화하는 기술이다. useMemo를 사용하면 특정 계산이 매번 다시 수행되지 않고 캐시된 결과를 사용할 수 있다.

 

다음은 useMemo를 사용한 예시 코드이다.

import React, { useMemo} from 'react'; const MyComponent =() =>{   // 복잡한 계산 로직을 가정해봅시다.   const expensiveCalculation =(a, b) =>{     console.log('계산 중...');     // 여기서 실제로 계산을 수행하는 로직이 들어갑니다.     // 예시로 간단한 덧셈을 수행하도록 하겠습니다.     return a +b; };   // useMemo를 사용하여 결과를 캐시합니다.   const memoizedValue = useMemo(() => expensiveCalculation(3, 5), []);   return(     <div>       <p>계산 결과: {memoizedValue}</p>     </div> ); }; export default MyComponent;

 

위의 코드에서 expensiveCalculation 함수는 복잡한 계산을 수행하는 함수로 가정한다. 이 함수는 매번 호출될 때마다 "계산 중..."이라는 로그를 출력한다. 이 때, useMemo를 사용하여 expensiveCalculation 함수의 결과를 캐시한다..

 

useMemo 훅은 두 개의 인자를 받는다. 첫 번째 인자는 메모이제이션할 함수를 전달하고, 두 번째 인자는 의존성 배열이다. 의존성 배열은 메모이제이션된 값을 갱신해야 할 상황을 지정한다. 위의 예시에서는 의존성 배열을 빈 배열([])로 전달하여 한 번만 계산되고 다시 계산되지 않도록 한다 이렇게 하면 expensiveCalculation 함수는 컴포넌트가 렌더링될 때 한 번만 호출되며, 이후에는 메모이제이션된 결과가 사용된다.

 

useMemo 훅은 주로 렌더링 성능 최적화에 사용된다. 계산 비용이 많이 드는 함수의 결과를 캐시하여 중복 계산을 피하고, 불필요한 렌더링을 방지할 수 있다.

 

정리하자면).. useMemo를 사용하여 메모이제이션된 컴포넌트나 함수는 의존성 배열에 변동되는 데이터가 없는 경우, 부모 컴포넌트가 렌더링될 때 한 번만 전체가 렌더링되고 이후에는 자신이 가지고 있던 이전 결과를 사용합니다. useMemo의 의존성 배열에 변동되는 데이터가 없으면 컴포넌트나 함수는 해당 의존성을 추적하지 않습니다. 따라서 부모 컴포넌트가 렌더링될 때마다 해당 컴포넌트나 함수가 다시 실행되는 것이 아니라 이전에 계산된 결과가 재사용됩니다. 이는 성능 향상을 이룰 수 있습니다.

---

useMemo 사용 시 주의점

useMemo를 사용하는 경우, 의존성 배열에 변동되는 데이터를 포함시키는 것이 중요하다. 변동되는 데이터가 의존성 배열에 포함되지 않으면 useMemo가 항상 이전 결과를 반환하기 때문에 실시간으로 업데이트된 데이터를 사용할 수 없다.

 

따라서,  의식적으로 의존성 배열을 올바르게 관리하여 변동되는 데이터에 따라 메모이제이션된 값이 갱신되도록 해야 한다.