[React]React.memo()

React.memo란

UI 성능을 증가시키기 위하여, React에서 제공하는 고차 컴포넌트(HOC)이다.
랜더링 결과를 메모이징하여, 불필요한 리렌더링을 방지할 때 사용한다.

React는 첫 렌더링 이후에 발생하는 리렌더 시, 이전의 렌더 결과와 비교하여
렌더 결과가 이전과 다를 때, DOM을 업데이트 한다.

하지만 부모 컴포넌트에 변경이 생길 경우,
자식 컴포넌트는 변경 사항이 없어도 리렌더가 발생하기 때문에
불필요한 리렌더가 발생하여 성능의 저하가 발생할 수 있다.

이 때, React.memo(래핑할 컴포넌트)를 사용하면 React는 컴포넌트를 렌더링하고, 결과를 메모이징한다.
그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징된 내용을 재사용하여
변경사항이 없음에도 발생하는 불필요한 리렌더를 방지할 수 있다.

//사용 예시

import React,{useState} from 'react';

const ChildComponent = () =>{
	return <div>Hello World!</div>
}

const ChildMemo = React.memo(ChildComponent)

const ParentComponent = () =>{
	return (
    <div>
    	<ChildMemo/>
    </div>
  )
}

참고 사이트: https://ui.toast.com/weekly-pick/ko_20190731