패스트캠퍼스 챌린지 29일차 - 리액트 UI라이브러리 (Material UI)

 

 

Material UI

 

구글에서 안드로이드 스마트폰에 적용하면서 알려진 UI 라이브러리이다.

현재 Antd와 더불어 가장 많이 사용되고 있다.

 

// 설치하기 (emotion)
npm install @mui/material @emotion/react @emotion/styled

// 설치하기(styled-components)
npm install @mui/material @mui/styled-engine-sc styled-components

 

Material UI에서 제공하는 아이콘을 사용하고 싶다면

npm install @mui/icons-material

를 함께 인스톨해주면 된다.

 

Material UI는 다른 라이브러리와 다르게 css 파일을 따로 import하지 않고 emotion 또는 styled-components을 지원한다.

따라서 프로젝트 생성시 함께 설치해주면 바로 스타일이 적용된다.

 

컴포넌트에 대한 예제코드 뿐 아니라 무료 템플릿도 git으로 제공하고 있어 다른 UI라이브러리보다 쉽게 접근할 수 있다.

유료 템플릿이 아닌데도 기본적으로 많이 사용하는 페이지들이 구현되어있다. (예 : 대시보드)

 

Material UI 스타일링

 

1. CssBaseline 컴포넌트

  브라우저 종류에 상관없이 일괄적인 스타일 적용을 위해 css를 전역에서 정규화시켜주기 위해

  App.js에 <CssBaseline /> 컴포넌트를 추가한다.

 

2. makeStyles Hook

  Material UI에서 직관적으로 사용자 정의 스타일을 적용할수 있도록 제공하는 React hook이다.

  커스텀 스타일 객체를 인자로 받기 때문에 커스텀 스타일 객체의 클래스 이름을 키로 갖고

  해당 클래스의 CSS 속성을 정의한 객체를 값으로 갖는다.

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.