React useMemo, useCallback, memo 차이점

useCallback, useMemo, 그리고 memo는 모두 React에서 성능 최적화를 위해 사용되는 도구이지만, 각각의 목적과 사용 사례가 다릅니다. 아래에서 그 차이점을 설명하겠습니다.

---

1. useCallback

• 목적: 함수를 메모이제이션하여 불필요한 재생성을 방지.

• 사용 대상: 함수.

• 사용 예시:

  import React, { useCallback } from "react";
  
  const MyComponent = () => {
    const handleClick = useCallback(() => {
      console.log("Button clicked");
    }, []); // 의존성 배열이 비어있으면 컴포넌트가 리렌더링 되어도 동일한 함수가 유지됨.
  
    return <button onClick={handleClick}>Click me</button>;
  };
  

• 언제 사용하나?

  • 자식 컴포넌트에 콜백 함수를 props로 전달할 때.
  • 동일한 함수 참조가 필요한 상황에서, 함수가 매번 새로 생성되지 않도록 방지.

---

2. useMemo

• 목적: 값의 계산 결과를 메모이제이션하여 불필요한 재계산을 방지.

• 사용 대상: 계산된 값(비용이 큰 연산의 결과).

• 사용 예시:

  import React, { useMemo } from "react";
  
  const MyComponent = ({ items }) => {
    const sortedItems = useMemo(() => {
       items.( a - b); 
    }, [items]); 
  
     ;
  };