[리액트] material-ui 템플릿으로 관리자 페이지 제작

- Material UI란?

리액트에서 바로 사용할 수 있는 기능과 디자인을 컴포넌트로 제공해주는 UI 프레임워크이다.

가이드라인을 따라 사용할 수도 있고, 사용자가 커스터마이징도 가능하다.

- 깃허브

GitHub - mui/material-ui: MUI Core (formerly Material-UI) is the React UI library you always wanted. Follow your own design syst

- 공식 사이트

Installation - Material UI

- 템플릿

React themes & templates | MUI Store

-설치

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

  

템플릿 사이트에 접속해보면 유료/무료 템플릿이 존재한다.

스크롤을 하단으로 내려보면 무료 React Admin Dashboard 템플릿을 볼 수가 있다. 22년 6월 기준 4개가 있다!!

이 중에서 마음에 드는 걸 골라서 커스터마이징 하면 된다.

- Preview

또한, Live Preview를 지원하기 때문에, 예제를 클릭하여 작동 방식을 알 수 있다.

Mantis Free - React Admin Dashboard Template | MUI Store

 

Download 버튼을 클릭하면, 깃허브 페이지로 이동하고 git clone 해당 git주소로 클론 하여 설치하면 된다.

git clone https://github.com/codedthemes/mantis-free-react-admin-template.git
yarn
yarn start

 

- 로그인 창

- 로그인 코드

(mantis-free-react-admin-template/pages/authentication/Login.js)

 

어찌 보면 styled-components와 유사하다! 또한 각 태그에 스타일을 넣을 수 있다.

예를 들어, Grid 컴포넌트는 콘텐츠를 반응형 격자로 배치시켜야 하는 경우 사용한다.

xs(extra-small)는 Breakpoints의 한 종류로써 0~600 픽셀을 의미한다.

xs={12}는 해당 반응형 사이즈에서 차지하는 column의 수이다.

const Login = () => (
    <AuthWrapper>
        <Grid container spacing={3}>
            <Grid item xs={12}>
                <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                    <Typography variant="h3">Login</Typography>
                    <Typography component={Link} to="/register" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                        Don&apos;t have an account?
                    </Typography>
                </Stack>
            </Grid>
            <Grid item xs={12}>
                <AuthLogin />
            </Grid>
        </Grid>
    </AuthWrapper>
);

export default Login;

 

- Material-ui 템플릿 좋은점

미니 프로젝트를 하며 CSS 프레임워크인 부트스트랩을 사용해본 적 있지만, 커스텀하는 것이 어색해 직접 CSS로 구현하곤 했다.

하지만, 리액트에서는 컴포넌트 단위로 개발을 하기에 Material UI를 사용하면 시간 단축뿐만 아니라 유용하다는 소식을 접했다.

사용해보니... 정말 신세계였다..!! 컴포넌트 단위라 리액트 프로젝트에 잘 적용(?)된다.

앞으로 더 사용해보면서 더 익숙해지도록 노력..!!