[ Optimize ] React.memo

React 최적화를 하기 위해 useMemo, React.memo, useCallback 세가지를 보통 이용 합니다 (제가 아직 배운게 이것밖에 없어서)

 

그중에서 React.memo에 대해 공부하며 예제를 간단히 만들어보며 연구를 했는데

괜찮은 예제가 떠올라서 이렇게 공부한걸 올리는 겸 예제를 공유 해봅니다.

 

React.memo를 배우기전에 Memoized에 대해서 알아야하는데 Memoized는 주어진 입력값에 대한 결과를 저장함으로써 같은 입력 값에 대해 함수가 한 번만 실행되는 것을 보장하는것을 의미합니다. ( 알고리즘 방식이기도 합니다. )

 

React.memo는 Component의 결과값을 Memoized를 합니다

띵동!

한국에서 어릴때 유행했던 벨튀(DingDong Ditch) 를 바탕으로 Component 화 시켜서 만들어본 예제 입니다. 

// study React.memo

import React, { useState, useEffect } from "react";

const Bell202 = ({ call }) => {
  useEffect(() => {
    console.log('Rerender Bell202');
  });

  return <div>{`Bell 202!! ${call}`}</div>
};

const Bell303 = ({ call }) => {
  useEffect(() => {
    console.log('Rerender Bell303');
  });

  return <div>{`Bell 303!! ${call}`}</div>
};

const DingdongDitch = () => {
  const [call202, setCall202] = useState(0);
  const [call303, setCall303] = useState(0);

  return (
    <div>
      <Bell202 call={call202}/>
      <button onClick={() => setCall202(call202 + 1)}>Bell 202</button>

      <Bell303 call={call303}/>
      <button onClick={() => setCall303(call303 + 1)}>Bell 303</button>
    </div>
  )
}

export default DingdongDitch;

설명을 하기 위한 그림

Click Button

Console

아파트가 하나 있고 202호 벨을 누르고 튀었습니다.
그런데 303호 벨도 같이 울립니다.
 
Ball202 state 값이 변했기 때문에 Component Re-Rendering 현상이 발생한 것인데

상위 컴포넌트인 DingdongDitch state 값이 변하여 Re-Rendering이 되면서
하위 컴포넌트인 Bell303 Component도 Re-Rendering이 되어버립니다.

 

Component가 Re-Rendering이 되는 기준은
1. 새로운 props가 들어오거나 (업데이트)
2. 부모 컴포넌트가 Re-Rendering이 되었을때
 

부모 컴포넌트가 Re-Rendering이 되면서 데이터가 바뀌며 202호 벨(props)를 눌렀지만 303호 벨 까지 눌러지는 상황이 발생이 된겁니다. 또한 303호 벨을 누르자 202호 벨까지 울리게 되는거죠.

 

rerender 기준의 2번째인 부모 컴포넌트가 re-rendering이 되었기 때문인데 이런경우 React.memo를 이용하여 Component를 감싸면 의미없는 Re-Rendering 이 해결이 됩니다.

 

import React, { useState, useEffect } from "react";

const Bell202 = React.memo(({ call }) => {
  useEffect(() => {
    console.log('Rerender Bell202');
  });

  return <div>{`Bell 202!! ${call}`}</div>
});

const Bell303 = React.memo(({ call }) => {
  useEffect(() => {
    console.log('Rerender Bell303');
  });

  return <div>{`Bell 303!! ${call}`}</div>
});

const DingdongDitch = () => {
  const [call202, setCall202] = useState(0);
  const [call303, setCall303] = useState(0);

  return (
    <div>
      <Bell202 call={call202}/>
      <button onClick={() => setCall202(call202 + 1)}>Bell 202</button>

      <Bell303 call={call303}/>
      <button onClick={() => setCall303(call303 + 1)}>Bell 303</button>
    </div>
  )
}

export default DingdongDitch;

 

설명을 하기 위한 그림

Button Click

React.memo를 이용하여 Component를 감싸면 상위 Component가 Re-Rendering이 되었다 해도 props가 동일하다면 바꾸지 않습니다.

 

이상 띵똥 벨튀를 이용한 예시였습니다.

감사합니다.