⚡️ React 성능 최적화: Beyond React.memo

원문 : https://cekrem.github.io/posts/beyond-react-memo-smarter-performance-optimization/

1. React.memo는 만능이 아니다

• React.memo는 props가 변경되지 않으면 컴포넌트 리렌더링을 막아주는 기능.
• 하지만 실질적으로 효과를 보려면 useCallback, useMemo 등과 함께 관리해줘야 하므로 코드 복잡도가 높아질 수 있음.
• 그리고 구조 자체가 리렌더링을 많이 유발하는 구조라면 React.memo로 해결되지 않음.

문제 코드:

const Button = React.memo(({ onClick }: { onClick: () => void }) => {
  return <button onClick={onClick}>Click</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    console.log('clicked');
  };

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

개선 코드:

const Button = React.memo(({ onClick }: { onClick: () => void }) => {
  return <button onClick={onClick}>Click</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

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

→ 하지만 궁극적으로는 구조적으로 리렌더링을 줄이는 게 더 효과적이다.

2. 상태를 하위 컴포넌트로 이동하기

• 상태를 상위 컴포넌트가 갖고 있으면 불필요하게 많은 하위 컴포넌트가 리렌더링될 수 있음.
• 리렌더링의 영향을 최소화하려면, 상태는 실제로 사용하는 컴포넌트로 내려주는 것이 좋음.

문제 코드:

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal open={open} />
    </>
  );
}

개선 코드:

function App() {
  return <ModalTrigger />;
}

function ModalTrigger() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      {open && <Modal />}
    </>
  );
}