✅ 문제

• Next Js로 개발하던 중 mui를 사용하자 오류가 발생함
• 처음 렌더시에만 오류가 뜨고 화면에 UI가 나타난 뒤에는 문제없이 작동함

🔍 원인 파악

• 크롬의 성능 테스트를 통해 알아 봤을 때 mui의 CSS적인 부분에서 오래 걸린다고 생각했다.

❗️ 문제가 되는 코드

LiveStudy.tsx

<Button
	disabled
	sx={{
	'&.Mui-disabled': {
	background: '#d9d9d9',
	color: 'white',
	},
	backgroundColor: 'black',
	color: 'white',
	}}
>
	실시간 수업 바로가기
</Button>

• 해당 코드와 같이 MUI를 커스터마이징 하는 부분에서 sx를 통해 계속 css를 수정을 반복하게 되다보니 성능이 저하됐다고 생각했다.

👍 해결 방안

• Emotion/styled를 통해 MUI를 컴포넌트화 함으로 style을 한번에 처리하면 될것 같다고 생각했다.

const LiveButton = styled(Button)`
  &.Mui-disabled {
    background-color: #d9d9d9;
    color: white;
  }
  background-color: black;
  color: white;
  width: 38.75vw;
`;

느낀점

• 해당 사진들을 봤을 때 스크립트 평가의 길이가 현저히 줄어든 것을 볼 수 있다.
• 물론 시간이 줄어들긴 했지만 여전히 줄일 수 있다고 생각이 들었고, 다음번엔 webpack chunk 분리를 통해서 성능을 향상시켜볼 생각이다.

📄 참조

https://mui.com
https://agilejung.tistory.com/entry/MUI%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95