useMemo와 useCallback

useMemo와 useCallback은 React의 훅(Hook) 중 하나로, 불필요한 렌더링을 줄이는 데 도움이 되는 기능입니다. 각각의 훅에 대한 설명과 예시 코드를 제공하겠습니다. 

useMemo useMemo는 메모이제이션된 값을 반환하는데 사용됩니다. 복잡한 연산을 줄이기 위해 계산된 값을 메모리에 저장하여, 의존성 배열의 값이 변경될 때에만 다시 계산하도록 합니다.

javascript

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ value }) => {
  const calcValue = useMemo(() => {
    // 복잡한 계산
    const result = value * 1000;
    return result;
  }, [value]);

  return <div>{calcValue}</div>;
};

위 코드에서 ExpensiveComponent가 렌더링될 때, useMemo 훅은 calcValue를 계산하고 메모이제이션됩니다. value 값이 변경되기 전까지는 calcValue의 다음 렌더링에서 복잡한 연산 없이 즉시 메모이제이션된 값을 반환합니다.

 

useCallback

 

useCallback은 메모이제이션된 함수를 반환하는 데 사용됩니다. 이 훅은 부수 효과 함수가 종속성 배열에서 정의된 값에 의존할 때 매번 새로운 함수를 생성하는 것을 방지하려는 경우에 주로 사용됩니다.

javascript

import React, { useCallback } from 'react';

const ButtonComponent = ({ onClick }) => {
  // ... 다른 코드
  return <button onClick={onClick}>Click me</button>;
};

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  const handleClick = useCallback(() => {
    // 어떤 동작 수행
    setCount(count + 1);
  }, [count]);

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

위 코드에서 ParentComponent의 handleClick 함수는 useCallback 훅을 사용하여 구현되어 있습니다. 따라서 값에 종속성이 있는 경우에만 새로운 함수를 생성하고, 이전 함수를 재사용하게 됩니다. 이를 통해 불필요한 함수 생성 및 렌더링을 줄임으로써 성능 향상이 이루어집니다.