[React] React.memo()

컴포넌트 시 불필요한 렌더링 과정을 거치는 상황을 없애고자 사용한다.

React.memo()

React는 먼저 컴퍼넌트를 렌더링 한 뒤, 이전 렌더된 결과와 비교하여
DOM 업데이트를 결정한다.
만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트한다.

컴퍼넌트가 React.memo()로 감쌌을 때, React는 컴퍼넌트를 렌더링하고 결과를 Memoizing한다.
그러고 다음 렌더링이 일어날 때 컴포넌트의 props가 바뀌지 않았다면, 불필요한 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수를 사용하면 된다.

function Btn({ text, onClick }) {
      console.log(text, '렌더링되었습니다.')
      return (
        <button
          ...
          }}
        >
          {text}
        </button>
      )
    }
const MemorizedBtn = React.memo(Btn)
    function App() {
      const [value, setValue] = React.useState('save Changes')
      const ChangeValue = () => setValue('Revert Change')
      return (
        <div>
          <MemorizedBtn text={value} onClick={ChangeValue} />
          <MemorizedBtn text="continue" />
        </div>
      )
    

참고링크
https://ui.toast.com/weekly-pick/ko_20190731