왜 이 기사를 쓰려고 했는가?

나도 포함한 Rails 초보자의 여러분은 반드시 Bootstrap 를 사용한 적이 있을 것입니다.

Rails 튜토리얼에서

포트폴리오에서

입사 후 신인 연수로

개인 개발에서

여기서 여러분에게 물어보고 싶다.

Bootstrap 지루하지 않아?

네, 유석에 질렸습니다. 너무 많이 사용합니다. 그만큼 인기라고 하는 것입니다만, 좀 더 리치한 UI 를 실현하고 싶다.

하지만 솔직히 Bootstrap 냄새를 제거하고 싶은 것만으로 CSS를 골고루 쓰고 싶지는 않습니다. 즐기고 싶다. 게다가 멋지게 하고 싶다.

결정입니다.
React를 공부합시다.
React를 공부하면 Material UI이라는 최강의 디자인 프레임워크를 사용할 수 있게 됩니다.

Material UI 란?

말하자면 Google이 제창하는 효과적인 디자인 패턴과 법칙.
그것을 라이브러리로 쉽게 자신의 응용 프로그램에 통합할 수 있도록 해주는 것이 Material UI라는 라이브러리입니다 🙌

어떤 디자인을 도입할 수 있는가?

버튼, 입력 폼, 카드, 아이콘 등 있어 모든 디자인이 하나하나 컴포넌트(부품)로서 제공되고 있습니다.
너무 많아서 모두를 소개할 수는 없지만, 흥미를 가져 주시는 것이 목적입니다.

이하 샘플은 모두 공식 사이트에 있는 것을 사용하겠습니다.
h tps : // 마테리아 음. 코m/

가입 화면 템플릿


이렇게 심플하고 세련된 디자인이 매력입니다. 폭넓은 사람에게 좋은 인상을 가질 수 있는 맛이 아닐까요?

지금까지 Bootstrap 냄새가 감돌고 있던 당신의 응용 프로그램이 단번에 현대적인 인상이됩니다. 대단해! !

Google이 제공하는 각종 서비스도 기본적으로는 Material design을 채용하고 있을 것이므로, Google 같은 디자인이라고 하면 좋을까요.

결론

물론 무료로 사용할 수 있고, 도입도 npm 패키지를 사용해,

$ npm install @material-ui/core

그냥 실행합니다.

최근 React 공부를 시작했습니다.
시작한 이유는, 「슬슬 프런트도 해 두지 않으면~」라고 하는 것도 있습니다만, 이 Materil UI 를 사용하고 싶어졌기 때문이라고 하는 것이 크다.

디자인이 잘 생기면 역시 개발의 동기 부여가 올라갑니다.
이제 Bootstrap을 졸업하고 싶다면 꼭 React를 공부하고 Material UI를 사용해 보는 것은 어떻습니까?