mui 개념과 사용 방법 시작하고 sx 프로퍼티 알아보기

😎mui는?

mui는 css 스타일링을 도와주는 라이브러리입니다.

공식문서에 따르면 

디자인을 신속하게 배치하는 것을 위한 css 유틸리티의 모음집이라고 생각할 수 있다고 하네요

 

확실히 스타일을 지정하는 것은 피로도가 높은 작업입니다.

하나의 스타일을 지정하는데에만도 꽤 많은 공수가 들어가고

당연하게 쓰이는 기능들을 위해 수많은 보일러플레이트가 들어가니까요

 

예컨대 가운데 정렬을 위한 css 스타일링을 다음과 같습니다.

  display: flex;
  justify-content: center;
  align-items: center;

이 외에도 너무 긴 텍스트를 막게해주는 css..

무슨 기능을 위한 css

유저 인터페이스를 위한 css

 

특히 ui기능을 구현하려고하면 굉장히 많은 수고가 들어가게되고

hover / active 상태등에 일일히 값들을 넣어주는건 굉장히 오랜 시간을 소모하게합니다.

mui는 바로 이러한 문제를 해결해주는 솔루션이라고 할 수 있으며

그와 동시에 커스터마이징에 열려있는 라이브러리입니다.

 

mui는 기본적으로 emotion을 기반으로 동작하기 때문에

서버사이드렌더링 환경에서 사용하기 위해서는 일부분 제약조건이 있을 수 있습니다.

선택적으로 styled-components와 통합하여 사용하는 방법 / tailwindcss와 함께 사용하는 방법 등도 있지만

이번에는 emotion을 통해 다루는 방법을 서술합니다.

 

mui와 수많은 편의기능이 담겨진 제 보일러플레이트를 사용하고 싶으신 분은

아래 레포지토리를 클론해주세요

https://github.com/XionWCFM/vite-mui

GitHub - XionWCFM/vite-mui: vite-mui

---

설치 방법

npm install @mui/system @emotion/react @emotion/styled

yarn add @mui/system @emotion/react @emotion/styled

보일러플레이트를 사용하지 않으실 분들은 위 명령어를 통해 설치를 진행해주면 됩니다.

emotion을 기반으로 돌아가기때문에 emotion도 필수적으로 설치해줘야하는 모습입니다.

npm install @mui/system @mui/styled-engine-sc styled-components

yarn add @mui/system @mui/styled-engine-sc styled-components

스타일드컴포넌트와 같이 사용할 분들은 위와 같이 설치해주면 되겠습니다.

---

mui의 sx property

처음 저를 혼란에 빠뜨린 프로퍼티이기도 합니다.

sx 프로퍼티는 불필요한 스타일 구성 요소 코드 작성을 피하고

대신 구성 요소 자체 내에서 직접 스타일을 정의하는 방법입니다.

얼핏 보면 jsx 문법의 style={} 프로퍼티와 비슷하면서도 내부 사용은 tailwindcss와 비슷해보이기도 합니다.

<Box
  sx={{
    bgcolor: 'background.paper',
    boxShadow: 1,
    borderRadius: 1,
    p: 2,
    minWidth: 300,
  }}
>
  <Box sx={{ color: 'text.secondary' }}>Sessions</Box>
  <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
    98.3 K
  </Box>
  <Box
    component={TrendingUpIcon}
    sx={{ color: 'success.dark', fontSize: 16, verticalAlign: 'sub' }}
  />
  <Box
    sx={{
      color: 'success.dark',
      display: 'inline',
      fontWeight: 'medium',
      mx: 0.5,
    }}
  >
    18.77%
  </Box>
  <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 12 }}>
    vs. last week
  </Box>
</Box>

sx라는 프로퍼티에 객체의 형태로 값을 넣어주어야하니

{{}} 형태가 됩니다.

자동완성은 지원되기는 하는데 제 기준에서는 살짝 느리더라구요

mx , mb, mt등 단축된 이름으로도 속성을 적용할 수 있습니다.

테일윈드에 익숙하다면 예상할 수 있듯이 마진에 대한 속성입니다.

 

sx는 디자인 토큰을 일회성으로 사용할때 빠르고 효율적인 솔루션이 됩니다.

만약 디자인 토큰들을 일회성으로 한 컴포넌트에서만 사용할것인데

styledcomponent를 이용한다면 어떻게 될까요?

const StatPrevious = styled('div')(
  ({ theme }) => `
  color: ${theme.palette.text.secondary};
  display: inline;
  font-size: 12px;
`,
);

이렇게 변수를 만들고 그 안에 styled로 래핑을 해주는 불필요한 형태가 됩니다.

sx 프로퍼티는 반응형도 간단히 지원할 수 있습니다.

      <Box
        component="img"
        sx={{
          height: 233,
          width: 350,
          maxHeight: { xs: 233, md: 167 },
          maxWidth: { xs: 350, md: 250 },
        }}
        alt="The house from the offer."
        src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&w=350&dpr=2"
      />

이런 형태로요!

<Box sx={{ width: [100, 200, 300] }}>This box has a responsive width.</Box>

배열 형태로도 지정해줄 수 있지만

많은 브레이크포인트를 설정해줘야하는 경우면 object 형태로 작성하는 걸 더 추천하네요

 

 

mui의 설명에 따르면

재사용하기 좋은 컴포넌트를 구축하는 데 이상적인 styled component 의 방식과 대조적으로

일회성으로 사용하는 css를 설정해줄때 sx가 좋다고합니다.

 

위에서 본 바와같이 mx, mb 등 약식 정의를 지원하기 때문에 이를 사용할 수 있지만

약식 정의만 사용 가능한 것은 아닙니다.

 

sx는 모든 핵심 mui 구성요소에서 지원됩니다.

https://mui.com/system/getting-started/the-sx-prop/

The sx prop - MUI System

여기서 간단히 넣을 수 있는 값들을 체크할 수 있습니다.