[React] React.memo

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.React.memo

고차 컴포넌트로, 함수형 컴포넌트의 결과를 메모이제이션하여 props가 변경되지 않으면 해당 컴포넌트를 다시 렌더링하지 않습니다. 이를 통해 성능을 최적화할 수 있습니다. useCallback하고 사용하면 좋습니다.

 

 

 

 

아래에서 useCallback으로 ChildComponent 의 props인 handleClick 함수가 한 번만 생성되도록 하여
ChildComponent에 전달되는 onClick prop의 참조가 변경되지 않습니다.

그러면 React.memo는 onClick prop의 참조가 변경되지 않았으므로, 자식 컴포넌트가 다시 렌더링되지 않습니다.

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

// React.memo를 사용하여 컴포넌트가 불필요하게 렌더링되지 않도록 함
const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent 렌더링');
  return <button onClick={onClick}>클릭하세요</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

  // useCallback을 사용하여 함수 메모이제이션
  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 빈 배열: 이 함수는 한 번만 생성됩니다.

  console.log('App 렌더링');

  return (
    <div>
      <p>클릭 횟수: {count}</p>
      <button onClick={() => setOtherState(!otherState)}>다른 상태 변경</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default App;