[React] React.memo

리액트는 state가 변할 경우 해당 컴포넌트와 하위의 컴포넌트들을 모두 리렌더링 하는데,

하위 컴포넌트 경우, props가 변화하지 않았다면 해당 컴포넌트 UI가 변화하지 않았을 수 있기 때문에 이런 경우 굳이 새롭게 컴포넌트 함수를 호출할 필요 없이 이전에 저장되어 있던 결과를 그대로 사용하는 것이 효율적

하지만 UI가 실질적으로 변화되었는지 안되었는지를 매번 리액트가 렌더링 과정에서 일일이 모든 컴포넌트 트리를 순회하면서 검사하는 것은 비효율적

개발자에게 이 컴포넌트가 리렌더링이 되어야 할지 아닐지에 대한 여부를 표현할 수 있는 React.memo 함수를 제공

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

React.memo는 HOC(Higher Order Component)이다.

• HOC(Higher Order Component)
  컴포넌트를 인자로 받아서, 컴포넌트를 리턴하는 컴포넌트

function HOC(Component) {
  /* do something */
	return <Component />
}

React.memo로 감싸진 컴포넌트의 경우

상위 컴포넌트가 리렌더링 될 경우 무조건 리렌더링 되는 것이 아니라

컴포넌트의 이전의 Props와 다음 렌더링 때 사용될 Props를 비교해서 차이가 있을 경우에만 리렌더링을 수행

만약 차이가 없다면 리렌더링을 수행하지 않고 기존의 렌더링 결과를 재사용

➡ 컴포넌트에서 불필요하게 리렌더링이 되는 경우를 막을 수 있다.

• props를 비교하는 방식

  props의 변화를 이전 props와 새로운 props를 shallow compare 해서 판단

  즉, props 객체간을 비교하는 방식

  하지만, 이 비교 로직을 사용하지 않고 비교를 판단하는 로직을 직접 작성하고 싶을 경우는 변화를 판단하는 함수를 인자로 받을 수 있도록 설정해둠
  

    function MyComponent(props) {
      /* render using props */
    }
    
    function areEqual(prevProps, nextProps) {
      /*
      true를 return할 경우 이전 결과를 재사용
      false를 return할 경우 리렌더링을 수행
      */
    }
    
    export default React.memo(MyComponent, areEqual);

React.memo의 두번째 인자로 함수를 전달할 경우

해당 함수의 인자로는 이전의 props와 새로운 props가 순서대로 인자로 전달되며,

이 함수의 return 값이 true일 경우 이전 결과를 재사용하고,

false를 return할 경우 리렌더리을 수행한다.