[REACT] useMemo UseCallback

 

 

 

useMemo와 useCallback은 둘 다 React Hooks으로,

최적화를 위해 사용하며, 비슷한 역할을 하는 것 같지만 사용 방법과 목적이 다르기에 공부한 내용을 정리합니다.

 

# Memoization ?

위의 두 hook을 사용하기 전, 메모이제이션이라는 개념에 대해 알아야합니다.

메모이제이션은 함수의 결과를 저장해두고, 동일한 입력이 들어올 때 저장된 결과를 반환하여 재사용하는 최적화 기법입니다.

적재적소에 사용 시, 함수의 성능 향상 및 불필요한 계산을 줄일 수 있습니다.

(메모리를 조금 더 사용하더라도 애플리케이션의 성능을 최적화 할 수 있음)

 

 

---

 

# useMemo

useMemo는 렌더링 중에 계산된 값을 기억하고,

의존성 배열의 값이 변경되지 않으면 이전에 계산된 값을 반환하는 함수. (메모이제이션된 값을 반환)

 

→ useMemo로 전달된 함수는 렌더링 중에 실행되기 때문에 렌더링 시 필요 없는 것을 작성하지 않으며

의존성 배열이 없는 경우 매 렌더링 때마다 재계산됨.

 

useMemo(() => fn, [deps])

//[deps]는 의존성 배열로 deps의 값이 변경될 때, () => fn 함수가 실행되며, 그 함수의 반환 값을 반환

 

[deps]는 의존성 배열로 deps의 값이 변경될 때, () => fn 함수가 실행되며, 그 함수의 반환 값을 반환

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
  const sum = useMemo(() => {
    console.log('Calculating sum...');
    return data.reduce((acc, curr) => acc + curr, 0);
  }, [data]); // data 배열이 변경될 때마다 sum 값이 재계산
  
  return <div>합계: {sum}</div>; //data 배열이 변경되지 않으면 이전 sum 값을 사용
};

export default MyComponent;

 

배열의 합을 계산하는 예제로 data 배열이 변경될 때마다 sum 값이 다시 계산함으로써 성능의 최적화 가능.

 

 

 

# useCallback

렌더링 시마다 새로 생성되는 함수를 캐싱하여 불필요한 함수 재생성을 방지.

useCallback은 렌더링 중 생성된 콜백 함수를 기억하고, 의존성 배열의 값이 변경되지 않으면 생성된 콜백 함수를 반환하여

자식 컴포넌트에 전달되는 콜백 함수가 렌더링마다 새로 생성되는 것을 방지하고 성능 향상. (메모이제이션된 함수를 반환)

 

→ 예를 들어, 부모 컴포넌트에서 생성된 콜백 함수를 useCallback을 사용하여 메모이제이션하면

해당 함수가 변경되지 않는 한 불필요한 자식 컴포넌트의 리렌더링을 방지하고 성능을 향상시킬 수 있습니다.

 

useCallback(fn, [deps])

//의존성 배열 내의 값이 변하면 메모이제이션된 함수를 반환

 

[deps]는 의존성 배열로 deps의 값이 변경될 때, () => fn 함수가 실행되며,  메모이제이션된 함수 반환

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

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // useCallback을 사용하여 불필요한 함수 생성을 방지
  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []); // 의존성 배열이 빈 배열이므로 항상 동일한 콜백 함수를 반환

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleClick}>증가</button>
    </div>
  );
};

export default MyComponent;

 

---

 

 

💡요약하면, useMemo는 값을 기억하고 싶을 때 사용되고, useCallback은 함수를 기억하고 싶을 때 사용됩니다.

또한 useCallback은 아래와 같은 경우 주로 사용합니다.
1. 콜백 함수를 자식 컴포넌트에 props로 전달할 때
2. 의존성이 변경되지 않는 한 항상 동일한 콜백 함수를 사용해야 하는 경우
3. 콜백 함수가 자주 변경되는 경우에 사용하여 성능을 최적화 (외부에서 값을 가져오는 api 호출 시)