[Material UI] 컴포넌트 CSS처리 후 React.memo로 최적화하기

usememo나 usecallback은 같은 컴포넌트 내에서 데이터나 함수의 최적화에 사용되지만

Component 자체를 최적화하려면 React.memo를 사용한다

그 중 외부 디자인 라이브러리 컴포넌트 사용시에는, 공통으로 필요한 부분에 대해 React.memo 처리해주는게 좋다

React.memo로 컴포넌트를 처리해주면, 해당 컴포넌트에 대해서는 이전 렌더링 결과가 달라지는 경우만 다시 렌더링해준다

 

내 경우에는 Material UI CSS 수정-> React.memo 처리하는 경우가 많았다

 

예컨데 해당 코드는 Material UI에서 제공하는 TextField를 가져와 CSS처리한 것이다.

withStyle로 CSS를 수정한 경우 다시 컴포넌트를 리턴한다

 

따라서 리턴한 객체에 그대로 memo처리가 가능하다

 

 

 

<효과>

 

해당 포스팅에서 소개한 처리를 거치면, CssTextFieldSort라는 컴포넌트는

다른 컴포넌트의 state가 바뀌어도 다시 렌더링되지 않는다

 

이러한 처리는 같은 props로 렌더링이 자주 일어나는 컴포넌트에서 사용하는 것이 좋다.

예컨데 props가 자주 바뀌는 컴포넌트는 이전 props와 다음 props를 비교하는데 소모되는 리소스가 더 크므로 쓰지 말자.