[React] memo(): props가 변경되지 않으면 컴포넌트 리렌더링❌

📌 memo()

: 컴포넌트의 props가 변경되지 않은 경우, 컴포넌트 리렌더링을 건너뛸 수 있는 훅

• 성능 최적화를 위한 함수형 컴포넌트를 위한 기능
• 컴포넌트가 불필요하게 리렌더링되는 것을 방지하는 데 사용
  
  • memo는 이전과 새로운 props를 비교하여 변경이 있을 때만 컴포넌트를 리렌더링 한다.
• 컴포넌트를 memo로 감싸면 해당 컴포넌트의 memoized 버전을 얻을 수 있다.
  
  • memoized 버전의 컴포넌트는 부모 컴포넌트가 리렌더링 되어도 props가 변경되지 않았다면 리렌더링 되지 않는다.
  • 그러나 memoization는 성능을 최적화하는 것이지 보장하지 않기 때문에 React는 리렌더링 될 수도 있다.

 

import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props) {
  // ...
});

• 매개변수
  
  • Component
    : memo로 감싸려는(memoize 하려는) 컴포넌트 
    
    • memo는 이 컴포넌트를 수정하지 않고 대신 새로운 memoized 컴포넌트를 반환한다.
    • 함수와 forwardRef 컴포넌트를 포함한 모든 유효한 React 컴포넌트가 허용된다.
  • arePropsEqual
    : 컴포넌트의 이전 props와 새로운 props의 두 가지 인수를 받는 함수
    
    • 이전 props와 다음 props를 비교하여 리렌더링 여부를 결정한다. 
      - 이전 props와 새로운 props가 동일한 경우,  true를 반환 / 그렇지 않으면 false를 반환
    • 일반적으로 이 함수를 지정하지 않는다❌

 

 

 

⏩ memo() 특징

• 복잡한 컴포넌트에 사용
  • memo는 복잡하거나 렌더링이 비용이 많이 드는 컴포넌트에서 효과적이다.
  • 단순한 컴포넌트나 작은 컴포넌트에서는 오히려 비교 과정에서 발생하는 오버헤드가 렌더링 성능에 부정적인 영향을 줄 수 있다.
• state 변화에는 리-렌더링
  • memo는 props가 변경된 경우에만 렌더링을 최적화한다.
  • 상태(state)가 변경되는 경우에는 리렌더링이 발생할 수 있다.

 

 

 

예제) 

• 자식 컴포넌트 (ChildComponent)
  • count 표시
  • React.memo로 감싸져 있어 props가 변경되지 않으면 리렌더링되지 않는다.
  • count가 변경되지 않으면 ChildComponent는 리렌더링되지 않고, 콘솔에 "ChildComponent rendered"가 출력되지 않는다.
• 부모 컴포넌트 (ParentComponent)
  • 버튼 클릭 시 count 증가
  • otherState는 자식 컴포넌트와는 관련이 없는 상태
  • otherState가 변경되면 부모 컴포넌트는 리렌더링되지만, count는 변경되지 않으므로 ChildComponent는 리렌더링되지 않는다.

import React, { useState } from 'react';

// 자식 컴포넌트
const ChildComponent = React.memo(({ count }) => {
  console.log('ChildComponent rendered');
  
  return <div>Count: {count}</div>;
});


// 부모 컴포넌트
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setOtherState(!otherState)}>Toggle Other State</button>
      <ChildComponent count={count} />
    </div>
  );
}

export default ParentComponent;

 

 

---

 

memo – React