React.memo 활용법

React.memo() 란

- React는 컴포넌트를 렌더링 한 뒤 이전 렌더 결과를 비교하여 DOM의 업데이트를 결정한다, 이전의 상태와 다르다면 DOM을 업데이트 하는 방식의 렌더링 형식이다

하지만 컴포넌트가 React.memo()로 래핑 될 떄, React는 컴포넌트를 렌더링 하고 결과를 메모이징 한 후 다음 렌더링이 일어날떄 props가 같다면 기존에 메모리잊 한 내용을 재사용 하여 무분별한 리렌더링을 방지할 수 있다.

 

사용법

```

function arrEqual(pre, next) {

    return (

        pre.from === next.from &&   

        pre.to === next.to

    );

} // true 반환 시 메모이징 된 렌더링 재사용

 

export default React.memo(HostChartView, arrEqual);

```

 

비교 방식을 수정하고 싶다면 React.memo() 두번째 매개변수(파라미터)에 비교 함수를 만들어주어 넘기면 된다.