react 앱에서 material-ui를 사용하다

material-ui는 구글에서 제공하며 bootstrap과 같은 라이브러리이다.쉽게 말해 원하는 디자인을 css 노가 없이 쉽게 구현할 수 있도록 도와 html 태그처럼 사용할 수 있다… 하지만 자세한 내용은 후술.

어쨌든 태그 속성명을 전달하는 방식을 이용하여 디자인을 할 수 있는데, 이에 대한 내용을 정리한다.

material-ui 설치하는 core와 icons를 모두 설치하기로 했다.기본적으로 material-ui에서 사용되는 이미지 디자인은 구글에서 제작한 웹 글꼴을 이용해 만들지만 웹 글꼴은 보통 구글 웹 글꼴에서 링크를 취해 링크에서 선언하는 방식이 대부분이어서 인터넷이 연결되지 않은 상태에서는 사용할 수 없다는 단점이 있어 보였다.

icons는 svg를 이용해 웹 글꼴에 비해 성능 우위에 있다는 글을 발견했기 때문에 icons를 선택했다.

리액트 앱에서 사용하는 것과 동일한 방식으로 사용할 수 있다. icons의 경우 일반 컴포넌트를 사용하도록 사용할 수 있다.솔직히 사용법은 공식 doc을 참조하는 것이 좋을 것 같고 컴포넌트에 대해 간단히 정리해 본다.

Box 주로 css 확장을 위해 사용된다. 일반적인 div라고 생각하면 편할 것 같아.리액트에서 css를 사용하기에는 생각보다 어려움이 많았다. Vue 컴포넌트처럼 일체화되어 있지는 않으므로 제대로 사용하기 위해서는 scss 파일을 만들어 모듈화시키거나 WithStyles와 같은 묘기를 사용해야 했지만 적응이 어려웠다.

또 쓰기 위해 만든 컴포넌트를 놓고 굳이 css를?라고 쓰는 이유를 느끼지 못했기 때문이다.대부분의 상황에서 Box는 이런 문제점을 해결해 주었다. 물론 CSS가 필요할 경우 scss를 사용하여 처리한다.개인적으로 css 모듈화는 좀 참신하긴 했어.

Typography 헤더나 글을 쓸 때 사용된다.글꼴 크기를 통합하고자 하는 경우에 주로 사용하게 되었다.

Grid 반응형 디자인을 만들 때 사용하기 편리함. 브라우저 크기를 줄이거나 원하는 비율로 칸을 나눌 때 css의 퍼센티지를 사용할 필요 없이 그리드를 나눠 구현할 수 있다.css에서 FlexPod를 사용하기에는 조금 골치 아픈 부분이 있지만 좋은 대안이 될 수 있다.

그 밖에도 많지만 아까도 언급한 시피 그대로 공식 docs를 참조하자.https://material-ui.com/components/box/ 개인적으로 뷔티파이를 먼저 접한 입장에서 리액트와 메터ial-ui의 삶은 매우 불편한 점을 많이 볼 수 있다.공식 docs가 그렇게 친절한 편이라고는 느낄 수 없었다. 다만 본인이 발견하지 못했을 수도 있지만 각 컴포넌트마다 사용할 수 있는 속성, 유형의 종류, 어떤 기능을 할 수 있는지에 대한 내용을 얻기가 어려웠다.

너무 답답해서… 이거 CSS로 하면 밥인데…라고 느껴지고 오히려 쉽게 구현할 수 있는 걸 material-ui를 이용하기 위해 돌아가서 만든다는 느낌도 든다.

물론 Button을 클릭하면 잔물결 효과, 그리고 인풋 태그와 모달, 프로세스 바 디자인은 멋지지만 그 외에는 솔직히 CSS가 더 편할 것 같기도 하고요.생산성이 얼마나 좋아질지는 모르겠지만 아직 익숙하지 않아서 그런지 조금 더 공부해야 할 것 같다.