useMemo, useCallback 발표 자료

1. useMemo란?

useMemo는 React의 Hook 중 하나로, 복잡하고 시간이 오래 걸리는 계산을 최적화하는데 사용됩니다. 값이 변경되지 않으면 계산을 반복하지 않게 도와줍니다.

2. useMemo를 왜 사용할까요?

React에서는 컴포넌트가 재렌더링될 때마다 내부의 모든 코드가 다시 실행됩니다. 만약 계산이 복잡하고 시간이 오래 걸린다면, 이로 인해 성능이 저하될 수 있습니다. useMemo를 사용하면 이런 문제를 해결할 수 있습니다.

3. 사용 예제

기본 사용법

const memoizedValue = useMemo(() => {
  // 오래 걸리는 계산
  return a + b;
}, [a, b]);

 

실습 예제

import React, { useMemo } from 'react';

function ExampleComponent({ a, b }) {
  const expensiveCalculation = (num1, num2) => {
    console.log('비싼 계산 중...');
    return num1 + num2;
  };

  const memoizedValue = useMemo(() => expensiveCalculation(a, b), [a, b]);

  return (
    <div>
      <p>계산된 값: {memoizedValue}</p>
    </div>
  );
}

이 예제에서 'a'와 'b'가 바뀔 때만 expensiveCalculation이 실행되고, 그렇지 않으면 이전에 계산된 값이 반환됩니다.

4. 언제 사용해야 할까요?

• 복잡한 계산이 있는 경우: 예를 들어, 큰 배열을 정렬하거나 필터링할 때.
• 렌더링 성능이 중요한 경우: 복잡한 컴포넌트 트리에서 성능 최적화가 필요할 때.
• 불필요한 재계산을 피하고 싶을 때: 의존성이 변경되지 않는 한 이전 계산 결과를 재사용하고자 할 때.

---

1.  useCallback이란?

useCallback은 React의 Hook 중 하나로, 함수를 메모이제이션하여 컴포넌트가 재렌더링될 때 동일한 함수를 재사용하도록 도와줍니다. 이를 통해 불필요한 함수 재생성을 방지하고 성능을 최적화할 수 있습니다.

2.  useCallback를 왜 사용할까요?

컴포넌트가 재렌더링될 때마다 함수가 새롭게 생성되면, 그 함수를 의존성으로 가지는 하위 컴포넌트들도 불필요하게 재렌더링됩니다. useCallback을 사용하면 동일한 함수를 재사용하여 이러한 문제를 해결할 수 있습니다.

3. 사용 예제

기본 사용법

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

 

실습 예제

 

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

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

  const handleClick = useCallback(() => {
    console.log('Button clicked!');
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Child component rendered');
  return <button onClick={onClick}>Click me</button>;
}

이 예제에서 'handleClick'함수는 'count'가 변경될 때만 새로 생성되고, 그렇지 않으면 동일한 함수가 재사용됩니다. 이렇게 하면 'ChildComponent'가 불필요하게 재렌더링되지 않습니다.

4. 언제 사용해야 할까요?

• 함수의 참조가 중요할 때: 함수의 의존성으로 가지는 하위 컴포넌트가 있을 때.
• 함수를 props로 전달할 때: 동일한 함수를 재사용하여 불필요한 재렌더링을 방지하고 싶을 때.
• 성능 최적화가 필요할 때: 복잡한 컴포넌트 트리에서 함수 생성으로 인한 성능 저하를 막고 싶을 때.

---

useMemo와 useCallback의 차이점

useMemo: 복잡한 계산의 결과를 메모이제이션하여 불필요한 재계산을 방지합니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

useCallback: 함수의 참조를 메모이제이션하여 불필요한 함수 재생성을 방지합니다.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

 

두 Hook 모두 성능 최적화를 위해 사용되지만, useCallback은 함수를 메모이제이션하고, useMemo는 값을 메모이제이션하는데 사용됩니다.