Material UI 사용법 및 makeStyles

우선 material ui 가 뭔지 간단하게 짚고 넘어가자. 

 

'리액트에서 바로 쓸 수 있는 컴포넌트 형태의 UI 프레임워크' 이 한마디로 표현 완료다.
기존의 스타일링 방법을 생각해보면 구조 짜고.. 태그 붙이고.. 클래스명 붙이고.. 중복되는 스타일링 위해 클래스명 집중화 하고.. 인라인스타일링 할 거 있으면 해주고.. 따로 css 파일 만들구... 막말로 드릅게 귀찮다. 하지만 리액트 조각(component)형태의 스타일링이 가능하고 부트스트랩과 비슷하게 컴포넌트 옆에 클래스명과 추가로 몇가지 속성들을 이용해줄 수 있다. 이정도만 알아도 충분하니 사용법은 실제 코드를 보면서 한 번 정리해보장

 

1. 설치!

npm install material-ui/core material-ui/icons

아이콘도 자주 쓰기 때문에 세트로 알아두면 되겠다링

 

 

 

2. 이름명으로 가져와버리기><

우리가 작업할 파일 상단에 '컴포넌트' 째로 가져와 준다 생각하면 되겠다.

import {} from '@material-ui/core'   // Typography , AppBar 등 공식사이트에서 확인 고고! 

빈 괄호안에 컴포넌트 명을 입력해줘서 가져오면 되겠당. 

 

끝!

 

import React from 'react';
import { Typography, AppBar,Button, Card, CardActions, CardContent, CardMedia, CssBaseline, Grid, Toolbar, Container } from '@material-ui/core';
import { PhotoCamera } from '@material-ui/icons';

const App = () => {
    return(
        <>
            <CssBaseline />  // normalize 스타일링 ex margin:0
                <AppBar position="relative">
                    <Toolbar>
                        <PhotoCamera />
                        <Typography variant="h6">
                            Photo Album
                        </Typography>
                    </Toolbar>
                </AppBar>
                <main>
                    <div>
                        <Container maxWidth="sm">
                            <Typography variant="h2" align="center" color="textPrimary" gutterBottom>
                                Photo Album
                            </Typography>
                            <Typography variant="h5" align="center" color="textSecondary" paragraph>
                                This is a explanation part of this site and I will going to explaing about each components I used in here.
                                 Thanks for visiting my blog and please leave some comment and subscribe if you want!
                            </Typography>
                            <div>
                                <Grid container spacing={2} justify="center">
                                    <Grid item>
                                        <Button variant="contained" color="primary">
                                            See my photos
                                        </Button>
                                    </Grid>
                                    <Grid item>
                                        <Button variant="outlined" color="primary">
                                            Secondary Action
                                        </Button>
                                    </Grid>
                                </Grid>
                            </div>
                        </Container>
                    </div>
                </main>

        </>
    )

}

export default App;

 

위의 코드를 보면 상단에서 우리가 쓸 컴포넌트들을 material-ui/core 에서 가져와 준다. 

 

각 컴포넌트들을 필요 할 때 쓰면서 스타일링을 마친다. 그리고 컴포넌트 태그 안에 기본적인 속성들로 스타일링을 1차적으로 해줄 수 있는데 공식 사이트에서 왼쪽 사이드바를 가게 되면 

이런 식으로 어떠한 속성들을 쓸 수 있는지 나와 있고 Components Api 가 아닌 Components 카테고리에서는 실제 적용 사례 코드들을 보면서 감을 익힐 수 있다. 

 

그럼 이제 '2차' 스타일링을 해야 될 텐데 예를 들면 

위 사진에서 Photo Album 큰 글씨가 담긴 블록을 상단의 타이틀 바와 간격을 두고 싶다. 속성만으로 해결이 가능 할까?? NO >< 한번 사이트에서 훑어보고 시간을 보내보면 알 것이다. 

 

 

그럼 어떻게 할까 

 

 <Container maxWidth="sm" style={{marginTop:'100px'}}>  // inline styling
 
 ~~~~~~~~ 쩌꾸쩌꾸 어쩌꾸 쩌꾸쩌꾸 저쩌꾸 ~~~~~
 
 </Container>

짠! 이거 하나면 끝!!

 

이면 안 된다.. 당장 저 정도의 스타일링을 진행하는데도  상단의 코드블럭 만큼의 양이 필요하고 각각의 컴포넌트에다가 일일이 인라인으로 스타일링을 먹이고 만약 스타일 먹일 개수가 많으면 그만큼 view 단에 가독성 떨어지고 복잡한 코드가 없을 것이다.

 

 <Container maxWidth="sm" style={{marginTop:'100px', marginLeft:'25px',
 								  fontSize:'35px',
                                  display:'flex',
                                  justifyContent:'center',
                                  alignItems:'center',
                                  lineHeight:'35px'
                                    }}>
                            <Typography variant="h2" align="center" color="textPrimary" gutterBottom style={{
                            	color:'gray',
                                fontSize:'35px'
                            }}>
                                Photo Album
                            </Typography>
                            <Typography variant="h5" align="center" color="textSecondary" 
                            paragraph
                            style={{
                            textAlign:'center', 
                            fontWeight:'bold'
                            }}
                            >
                                This is a explanation part of this site and I will going to explaing about each components I used in here.
                                 Thanks for visiting my blog and please leave some comment and subscribe if you want!
                            </Typography>
                            <div>
                                <Grid container spacing={2} justify="center" style={{
                                	marginTop:'100px',
                                    marginRight:'50px',
                                    display:'flex'
                                }}>
                                    <Grid item>
                                        <Button variant="contained" color="primary">
                                            See my photos
                                        </Button>
                                    </Grid>
                                    <Grid item>
                                        <Button variant="outlined" color="primary">
                                            Secondary Action
                                        </Button>
                                    </Grid>
                                </Grid>
                            </div>
</Container>

위의 코드처럼 적당히 어지럽히긴 했는데 깔끔해 보이지는 않는 코드다

 

고럼 어떻게 할까

 

우선 상단에 하나만 더 임포트 해주자

import { makeStyles } from '@material-ui/core/styles';  // core 까지만 써줘도 이상 없다

 

그 다음 객체를 하나 만들어 줄건데

const useStyles = makeStyles(() => ({
    container:{                          // container이름의 객체에 스타일링 해주기
        backgroundColor:'black',
        marginTop:'100px'
    },
    buttons:{                            // buttons 이름의 객체에 스타일링 해주기
        paddingLeft:'20px'
    }
}));

 

그 다음 꺼내 써주면 되는데

  const classes = useStyles(); //   useStyles 객체 classes 라는 값으로 가져오기  
  
   <Container maxWidth="sm" className={classes.container}>
   !~~!~!~!~#~#~#~#~#~#~#~#
   </Container>

black..

 

이런 식으로 꺼내 써주면 되겠다. 이렇게 하면 원할 떄마다 useStyles 객체에 추가로 스타일링 객체 넣어주면서 jsx view단에서는 필요할 때 마다 꺼내 써주면 되겠다. 이상 끝!!

아예 스타일링 관련한 코드는 따로 관리하고 싶다하면 따로 파일을 하나 만들어서 export 해준다음에 꺼내서 써도 상관 없겠다. 

 

 

간단히 정리 하자면

1. import core, icons, styles(필요하면)

 

2. 사용할 컴포넌트들 임포트

 

3. 기본 속성값 이용해 1차 스타일링 ㄱㄱ싱

 

4. 필요하면 makeStyles 이용해서 2차 스타일링 ㄱㄱ싱!