MUI에 대해서
MUI란?
Material-UI (mui)는 웹 애플리케이션을 빌드하기 위한 리액트 기반의 UI 프레임워크이다. Google이 2014년 안드로이드 스마트폰에 적용하면서 알려졌으며, Material Design을 기반으로하였기에 시각적으로 훌륭하고 사용하기 쉽다. 때문에 개발자들도 스타일리쉬한 쉬운 사용자 인터페이스를 개발을 손쉽게 할 수 있다. 이러한 Material-UI는 컴포넌트 기반 아키텍처를 사용하여 재사용 가능하고 일관된 디자인 요소를 구축하도록 한다.
특징
1. CSS-in-JS
다른 UI 라이브러리들과 마찬가지로, js에서 css를 관리하는 방식으로 스타일링한다.
이는 컴포넌트별로 스타일을 정의하고 적용하는데 유용하다.
2. 컴포넌트 기반
mui는 다양한 UI 요소를 컴포넌트 형태로 제공하며,
이러한 컴포넌트를 조합하여 원하는 인터페이스를 구성할 수 있다.
3. 반응형 디자인
mui 컴포넌트는 다양한 화면 크기와 장치에 맞게 반응한다.
모바일 기기부터 데스크톱까지 일관된 사용자 경험을 제공해준다.
4. 테마 커스터마이징
테마를 사용하여 앱의 전반적인 스타일을 일관되게 제어하거나 수정할 수 있다.
색상, 글꼴 등을 커스터마이징하여 앱을 더 맞춤화할 수 있다.
5. 문서화와 예제
mui는 잘 구성된 예제 문서와 ts, js 코드 또한 제공하기 때문에 개발자가 손쉽게 접근할 수 있다.
styled-component
작성 방법
import Stack from '@mui/material/Stack';
const Headertitle = styled(Stack)`
text-align: center;
color: toamto;
width: 100%;
`;- 먼저 사용하고자 하는 MUI 컴포넌트를 imporot한다.
- 컴포넌트 변수명을 선언
- styled(스타일 하고 싶은 MUI 컴포넌트)
- “(벡틱)에 css 작성
적용
<HeaderTitle> 헤더 제목 <HeaderTitle/>위와 같이 작성하게 되면 자식에 HeaderTitle 컴포넌트가 적용이 된다
🚨 주의사항 🚨
외부 라이브러리는 선정할 떄 신중하게 해야하고, 해당 라이브러리 문서를 꼭 확인후에 해야한다.
보통은 커스터마이징이 가능한지, 가능하다면 어떻게 해야하는지도 나와있고, 그 의도에 맞게 사용해야한다.