React 코드 최적화 (React.memo, useCallback, useMemo)

React.memo

React.memo는 함수형 컴포넌트를 렌더링하는 데 사용되는 메모이제이션 기능을 제공한다. 이를 통해 컴포넌트의 리렌더링을 방지할 수 있다.

일반적으로, 컴포넌트가 이전에 전달된 프롭스와 다른 경우에만 렌더링을 트리거한다.

import React from 'react';

const MyComponent = React.memo(({ name }) => {
  console.log('Rendering MyComponent');
  return <div>{name}</div>;
});

// 이 컴포넌트는 name이 변경될 때만 리렌더링된다.

useMemo

 useMemo 훅은 계산 비용이 많은 연산의 결과(값) 를 기억하고, 이전에 계산한 값이 변경되지 않았다면 캐시된 값을 재사용한다. 이는 렌더링 시간을 최적화하는 데 유용하다.

import React, { useMemo } from 'react';

const MyComponent = ({ a, b }) => {
  const result = useMemo(() => {
    console.log('Calculating result');
    return a * b;
  }, [a, b]);

  return <div>{result}</div>;
};
// a나 b가 변경될 때만 result가 다시 계산된다.

useCallback

 useCallback은 메모이제이션된 콜백 함수를 반환합니다. 이는 자식 컴포넌트에게 콜백을 전달할 때, 자식 컴포넌트가 변경될 때마다 불필요한 리렌더링을 방지할 수 있다.

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

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

 const handleClick = useCallback(() => {
   setCount(count + 1);
 }, [count]);

 return (
   <div>
     <ChildComponent onClick={handleClick} />
   </div>
 );
};

const ChildComponent = React.memo(({ onClick }) => {
 console.log('Rendering ChildComponent');
 return <button onClick={onClick}>Click me</button>;
});

// ParentComponent가 리렌더링될 때마다 ChildComponent도 리렌더링됩니다.
// useCallback을 사용하면 count가 변경될 때만 handleClick이 변경되므로 ChildComponent가 리렌더링된다.

useEffect와 useCallback 차이점

사용 목적에 그 차이점이 존재한다.

useCallback

useCallback(함수, [검사값]) 검사값이 변경되었을 때에만 함수를 생성하는 Hook이다.

함수를 memoize → 재사용하기 위해서 사용(랜더링 성능 최적화)

[] : 검사값이 비어있으므로, 최초 랜더링시에만 함수를 선언하고 이후 계속 재사용한다
[number] : number 값이 변경되었을 때에만, 함수를 다시 선언

• 자식 컴포넌트에게 props로 함수를 전달할 때 사용 → 자식 컴포넌트의 불필요한 랜더링을 방지한다.
• 함수 변경이 없거나, 연산이 큰 함수를 최초에만 선언하기 위해서 사용
• 렌더링이 자주 될 위험이 있는 요소를 성능 최적화를 위해 사용한다.

useEffect

사이드 이펙트 방지를 위해 사용한다.

useEffect는 어떤 값의 변화가 동작을 자동으로 불러오도록 하고 싶을때,
useCallback은 어떤 값이 변했을때 특정 동작을 값에 따라 다르게 실행시키고 싶거나 원하는 타이밍에 어떤 동작을 실행시키고 싶을때 적합하다.