[코드잇 풀스택 1기] - React useMemo, useCallback

useMemo, useCallback ?

 

https://react.dev/reference/react/useMemo

https://ko.react.dev/reference/react/useCallback

 

useMemo ?

useMemo 훅은 컴포넌트가 랜덩링 될 때 특정 값을 재계산을 피하고 성능을 최적화하기 위해 사용됩니다.

이 Hook값이 변경되지 않는 한 이전 계산된 결과를 다시 사용합니다. 이를 통해서 불필요한 연산을 최소화하고, 성능을 개선합니다.

 

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

 

useMemo는 두 가지 사항을 전달 해야합니다.

1. 인수를 사용하지 않고, 계산하려는 값을 반환하는 계산

2. 계산 내부에서 사용되는 구성 요소 내의 모든 값을 포함하는 종속성 목록입니다.

 

이후 모든 렌더링에서 React는 종속성을 마지막 렌더링 중에 전달한 종속성과 비교합니다.

종속성이 변경되지 않은 경우 이전 이미 계산한 값을 반환합니다. 그렇지 않으면 React는 계산을 다시 실행하고 새 값을 반환합니다.

 

 

 

 

useCallback ? 

useCallback 훅은 React에서 컴포넌트가 랜더링될 때 함수의 재생성을 방지하기 위해 사용됩니다.

이 훅은 특정 의존성 배열의 값이 변경되지 않는 한 이전에 생성된 함수를 다시 사용합니다. 이를 통해 성능을 최적화하고 불필요한 ㄹㄴ더링을 줄일 수 있습니다.

 

//const cachedFn = useCallback(fn, dependencies)//



import { useCallback } from 'react';

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

fn : 캐싱할 함수값입니다. 이 함수는 어떤 인자, 변환값을 가질 수 있습니다. React는 첫 렌더링에서 이 함수를 반환합니다. (호출X) 다름 렌더링에서 dependencies값이 이전과 같다면 React느 같은 함수를 다시 반환하게 됩니다.

반대로 dependencies값이 변경되었다면 이번 렌더링에서 전달한 함수를 반환하고 나중에 재사용할수 있도록 이를 저장합니다.

 

dependencies : fn 내에서 참조되는 모든 반응형 값의 목록입니다. 반응형 값은 props, State, 컴포넌트 안에서 직접 선언된 모든 변수와 함수를 포함 하고 있습니다.

의존성 목록은 항목 수가 일정해야하며, React는 Object비교 알고리즘을 이용해 각 의존성을 이전 값과 비교합니다.

 

장점 :

성능 최적화 : 복잡한 계산이나 무거운 연산을 반복적으로 수행하지 않으므로, 성능을 크게 향상 시킵니다.

불필요한 재렌더링 방지 : 컴포넌트가 재렌더링될 때 불필요한 연산을 피할 수 있습니다.

코드 가독성 향상 : 메모이제이션을 통해 코드의 의도를 명확히 할 수 있고, 어떤 값이 실제로 메모이제이션되는지 명확히 할 수 있습니다.

 

많이 사용시 문제점 :

useMemo 훅을 많이 사용하면 반대로 성능 저하될 수 있습니다.

1. 오버헤드 증가 : useMemo를 너무 자주 사용하면 메모이제이션을 관리하는 오버헤드가 실제 연산 시간보다 더 커질 수 있습니다.

2. 불필요한 복잡성 : 불필요한 부분에 useMemo를 사용하여 코드가 복잡해질 수 있고 반대로 가독성 까지 떨어집니다.

3. 의존성 배열 관리 어려움 : 의존성 배열을 잘못 관리하면 버그가 발생하거나 예상치 못한 동작이 발생할 수 있음.

 

정리 : useMemo, usecallBack은 성능 최적화를 위해 사용하지만, 적절한 상황에서 사용해야합니다.