[MUI] <div> VS <Box> / sx VS style

 

<div> vs <Box>

mui에 대해 자료를 조사하다보면 성능에 대한 이슈를 종종 찾아볼 수 있다.

그래서 과거의 글들을 찾아보면 Box보다는 div를 써라는 말도 자주 찾아볼 수 있다.

mui - <Box>

React Box - Material UI

The Box component serves as a wrapper component for most of the CSS utility needs.

“Box 컴포넌트는 css 유틸을 필요로 하는 wrapper 컴포넌트 역할을 한다”고 되어 있다.

• 기본적으로 컴포넌트를 감싸는 wrapper 역할로써 사용된다.
• 설정을 통해 다른 컴포넌트로 사용할 수 있다.
  • 기본적으로는 <div> tag로 적용되지만, component prop을 통해 다른 tag가 될 수 있다.

<Box component="span">span</Box>
<Box component="button">button</Box>

개인적으로는 약간의 차이는 있을 수 있으나 <div>와 <Box>를 나눌필요까진 없을것 같다.

옛날처럼 컴퓨터 성능이 그렇게 낮은것도 아니고 성능상 그렇게 많은 차이가 없을것으로 생각된다.

sx vs style

<div style={{color:'black'}}>hi</div>
<Box sx={{color:'black'}}>hello</Box>

react에서 css 적용 방법 중 inline style 작성법이 있다.

개발하는 과정에서는 즉각즉각 css를 적용시킬 수 있어서 inline style이 편하다.

 

하지만, html을 반환하는 jsx문법은 react가 변환할 때 모든 속성이 props 객체의 일부가 되어버려 렌더링때마다 style 객체가 계산되기 때문에 성능적인 면과 재사용 부분에서 추천되지 않는다.

 

물론 sx는 style과 달리 react가 변환할 때 props 객체의 일부가 아닌 styled-component화 되어 적용된다. 그리고 mui theme와 mt(marginTop)같은 유틸적 기능을 사용할 수 있다.

 

하지만 여전히 재사용성에서 취약하고, 효율면에서 sx가 아닌 더 좋은 방법이 있다.

 

 

inline style 보다는 좋지만 다른 대안에 비해 성능이 저하된다고 언급되어 있다.

초반에는 styled-component를 이용하여 프로젝트를 진행했지만, 컴포넌트 네이밍, 파일의 분할 등 작업과정에서 조금씩 귀찮아져서 sx를 자주 썼었다.

 

하지만 성능, 재사용성, 코드 가독성 등을 고려한다면 지양하는게 좋겠다.