리액트 성능최적화 하기 - useMemo, useCallback

리액트의 컴포넌트는 이제 class 보다는 function 형을 사용할 것을 권장하고 있습니다.

함수형으로 사용은 hook 의 역할이 커지면서 효용성이 더 커지게 되었으나 단점으로는 함수가 실행될 때마다 rendering이 다시 발생되어 메모리를 비효률적으로 사용하게 됩니다.

 

이를 방지하기 위해 사용하는 hook 이 useMemo, useCallback 입니다.

어떤 경우에 어떻게 사용하면 되는지 예를들어 알아 보겠습니다.

 

1.  useMemo

• 계산된 값을 메모이제이션(Memoization) 하는데 사용
• 주요 사용 예시 : 복잡한 계산이 필요한 경우, 렌더링 성능을 최적화해야 할 때 사용

import React, { useMemo } from 'react';

function ExpensiveComponent({ data, filter }) {
  const filteredData = useMemo(() => {
    return data.filter(item => item.includes(filter));
  }, [data, filter]);

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

      data, filter 값이 변경될 때만 filteredData 가 계산됨

2.  useCallback

• 함수를 메모이제이션(Memoization) 하는데 사용
• 주요 사용 예시 : 자식 컴포넌트에 콜백을 전달 할때, useEffect의 의존성 배열에 함수를 포함시킬 때

import React, { useCallback, useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 의존성 배열이 비어있으므로 함수는 한 번만 생성됩니다.

  return <ChildComponent onClick={handleClick} count={count} />;
}

function ChildComponent({ onClick, count }) {
  console.log("ChildComponent rendered");
  return (
    <div>
      <button onClick={onClick}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}

    의존 배열이 비어있어 함수가 리렌더링 되어도 실행되지 않음

 

3.  두 hook 의 차이점

• useMemo 는 계산결과를 반환하고,
• useCallback 은 함수자체를 반환

👉 메모이제이션(Memoization)이란?
프로그래밍에서 사용하는 최적화 기법으로 주로 시간이 많이 걸리는 함수의 결과를 저장해두고 재사용하는 방법을 말함
- 함수의 호출 결과를 저장해 두었다가 동일한 입력에 대해 함수가 다시 호출될 때 저장된 결과를 반환함
- 중복 계산을 방지하여 프로그램의 실행 속도를 높이는 것이 주요 목적임
- 일반적으로 해시테이블과 같은 자료구조를 사용하여 함수의 입력값과 결과값을 저장