material-ui는 구글이 제공하고, bootstrap과 같은 라이브러리이다.쉽게 말해서 원하는 디자인을 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를 이용하기 위해 돌아가서 만든다는 느낌도 든다.
물론 Button을 클릭하면 잔물결 이펙트 그리고 인풋 태그와 모달, 프로세스 바 디자인은 멋지지만, 그 외에는 사실 CSS가 더 편한 것 같기도 하고.생산성이 얼마나 좋아질지는 모르지만 아직 익숙하지 않아서일 수도 있어 좀 더 공부해야 할 것 같다.