React에서 props,state,context가 변경이 되면 컴포넌트가 재실행이되고 리렌더링 되게된다.

부모 컴포넌트가 state를 props로 전달하고 있는 컴포넌트가 있다고 했을때, state가 업데이트 되면 당연히 부모 컴포넌트가 재실행되면서 자식 컴포넌트도 재실행이 될것이다.

만약 자식 컴포넌트에게 불리언 값을 props로 전달한다고 생각해보자. state가 아닌 고정 값이다. 자식에게 state를 넘겨주고 있지 않다. 이 때는 어떻게 될까?

자식 컴포넌트도 결국에는 함수 호출과 같기 떄문에 부모 컴포넌트가 재평가 된다면 자식 컴포넌트도 다시 실행이 되는 것이다. 즉 자식컴포넌트의 재평가는 props 값과는 상관이 없다.

자식 컴포넌트에게 전달하는 값은 동일한데 자식 컴포넌트를 재평가, 재실행 해줄 필요가 있을까? 이러한 현상은 전체 어플리케이션의 크기가 커질 수록 비용이 커지고 퍼포먼스 저하로 이어질 수 있다.

React.memo()로 불필요한 재평가 방지

React.memo로 컴포넌트를 감싸게되면 props의 state가 업데이트 될 때만 재평가가 이루어진다.
예제를 통해서 알아보자.

import React from "react";
import MyParagraph from "./MyParagraph";

const DemoOutput = (props) => {
  console.log("DemoOutput.js 실행");
  return <p>{props.show ? "데모!" : ""}</p>;
};

export default React.memo(DemoOutput);

App.js 컴포넌트에 DemoOutput 컴포넌트가 있고 App.js는 DemoOutput컴포넌트에게 show={false}를 props로 전달하고 있다고 했을때, 콘솔에는 "DemoOutput.js 실행"이라고 찍히지 않을 것이다.
하지만 고정값이아니고 업데이트 되는 상태값을 전달하게 되면 콘솔에는 "DemoOutput.js 실행"이 찍힐 것이다.

props가 함수일때

만약 전달받는 props가 state가 아닌 함수라고 생각해보자. (버튼을 클릭했을때 함수가 실행되야할때 처럼)

함수일때는 state가 동작하는 것과 다르다.
부모컴포넌트가 재실행되고, 부모컴포넌트의 내부 코드들은 새로운 함수, 변수가 된다.

자식 컴포넌트를 감싸고 있는 React.memo()는 props를 이전 props와 비교하게 되는데 props로 받은 값이 원시타입일 경우에는 변화로 감지하지 않지만 함수일 경우에는 변화로 감지하게 된다. (Javascript에서 함수는 객체이기 때문)

그래서 함수를 props로 전달받는 컴포넌트는 React.memo가 최적화해줄 수 없는 상황이다.

왜 모든 컴포넌트에 React.memo를 적용하지 않는가?

memo 또한 또 다른 일을 처리하는 것이기 때문에 필요한 경우에만 사용해야한다. 즉, 비용 증가로 이어질 수 있다. 퍼포먼스를 향상시키기 위해서는 개발자가 적절하게 사용할 수 있어야한다.