material-ui는 구글에서 제공하며 부트스탭과 같은 라이브러리이다.쉽게 말해 원하는 디자인을 css 노가다 없이 쉽게 구현할 수 있도록 지원하며 html 태그처럼 사용할 수 있다. 한 가지 자세한 내용은 후술.
어쨌든 태그의 속성명을 넘기는 방식을 이용해서 디자인을 할 수 있는데, 이에 대한 내용을 정리한다.
material-ui 설치할 core와 icons 두 종류를 모두 설치하기로 했다.기본적으로 material-ui에서 사용되는 이미지 디자인은 구글에서 제작된 웹 폰트를 이용해 만들지만 웹 폰트는 보통 구글 웹 폰트에서 링크를 따 link로 선언하는 방식이 대부분이어서 인터넷이 연결되지 않은 상태에서는 사용할 수 없다는 단점이 있어 보였다.
icons는 svg를 이용해 웹 폰트에 비해 성능적으로 우위라는 글을 발견했으므로 icons를 선택했다.
리액트 앱으로 사용하면 이러한 방법으로 사용할 수 있다. icons의 경우 일반 컴포넌트를 사용하는 것처럼 사용이 가능하다.솔직히 사용법은 그대로 공식 doc을 참조하는 것이 좋고, 컴포넌트에 대해 간단하게 정리해 보자.
Box 주로 css 확장을 위해 사용된다. 일반적인 div라고 생각하면 편할 것이다.리액트에서 css를 사용하기에는 생각보다 어려움이 많았어. Vue 컴포넌트처럼 일체화되어 있는 것이 아니기 때문에 제대로 사용하기 위해서는 scss 파일을 만들어 모듈화 시키거나 With Styles 같은 묘기를 보여줘야 했는데 적응이 어려웠다.
또한 사용하라고 만든 컴포넌트를 제쳐두고 굳이 css를?라고 사용할 이유를 느끼지 못했기 때문이다.여러 상황에서 Box는 이런 문제점을 해결해 주었다. 물론 CSS가 필요한 경우 Scss를 사용하여 처리한다.개인적으로 css 모듈화는 조금 신선하기는 했다.
Typography 헤더나 문장을 쓸 때 사용된다.글꼴 크기를 통합하고 싶을 때 주로 사용하게 됐다.
Grid 반응형 디자인을 만들 때 사용하기 편리함. 브라우저의 크기를 줄이거나 원하는 비율로 칸을 나눠야 할 때 css의 퍼센티지를 사용할 필요 없이 그리드를 나누어 구현할 수 있다.css에서 flex를 사용하기에는 조금 골치 아픈 부분이 있지만 좋은 대안이 될 것이다.
이것 말고도 많은데, 아까도 언급했던 단지 공식 docs를 참조해 보자.https://material-ui.com/components/box/ 개인적으로 Vuetify를 먼저 접한 입장에서 리액트와 material-ui의 삶은 매우 불편한 점이 많다.공식 docs가 그렇게 친절한 분이라는 느낌도 받지 못했어. 단지 본인이 발견하지 못했을지 모르지만 컴포넌트마다 쓸 수 있는 속성, 유형의 종류, 어떤 기능을 할 수 있는지에 대한 내용을 얻기 힘들었다.
너무 답답해서… 이거 CSS 하면 ㅈ 밥이지만이라는 느낌을 받고, 오히려 쉽게 이룰 수 있는 것을 material-ui를 이용하기 위해 돌아가서 만든다는 느낌도 든다.
물론 버튼을 클릭하면 잔물결 이펙트, 인풋 태그와 모달, 프로세스 바 디자인은 멋지지만, 그 외에는 솔직히 CSS가 편하다는 생각도 들고.생산성이 얼마나 좋아질지는 모르지만 아직 익숙하지 않기 때문일 수도 있다.