[React.js]React.memo() 알아보기

자식 컴포넌트 두개가 있는데, 한쪽 자식에게 전달하는 props에만 변경이 생긴경우,

특별한 조건을 주지 않는한 부모는 그 둘 모두를 렌더링(rendering) 하게 된다. 

 

그런데 만약 자식 컴포넌트가 1000개 라면 자식 하나의 변경만으로도 나머지 자식들 모두가 새롭게 렌더링되야하므로 시간이 지연이 발생하게 될 것이다. 

 

이때 유용하게 사용되는 메소드가 React.memo()다.

 

아래와 같이 React.memo()를 사용하면 처음에는 두 컴포넌트가 모두 렌더링 되고,

이후에는 변경된 자식 컴포넌트만 렌더링이 된다.

function Btn({ text, changeValue }) {
  console.log(text, "was chaneged"); 
  
  // 처음 렌더링 됐을 때,
  // Save Changes was chaneged
  // Continue was chaneged
  
  // onClick 이벤트 적용 후 렌더링 됐을 때,
  // Revert Changes was chaneged
  
  return (
    <button
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: 10,
      }}
      onClick={changeValue}
    >
      {text}
    </button>
  );
}

const MemorizedBtn = React.memo(Btn);

function App() {
  const [value, setValue] = React.useState("Save Changes");
  const changeValue = (event) => {
    setValue("Revert Changes");
  };
  return (
    <div>
      <MemorizedBtn text={value} changeValue={changeValue} />
      <MemorizedBtn text="Continue" />
    </div>
  );
}