React_Typescript와 Material-ui Framework로 ToDoList 만들기 (Material-ui 사용법)

안녕하세요! AlbertKo입니다.

요즘 이래저래 바빠서 글을 꾸준히 업로드 하지 못하는 점 죄송합니다 ㅜㅜ

전에 올렸던 ToDoList를 어떻게 만든건지, React에서 Typescript로 개발하면서 material-ui 프레임워크를 어떻게 적용하는지

한 번 같이 진행해보도록 합시다 ㅎㅎ

Material Design 이란?

 

 불필요한 요소는 제거하고 본질만을 표현하는 디자인기법인 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방향으로 구글에서 발표한 디자인 가이드입니다. 

 이미 안드로이드를 사용하시는 여러분들과 구글에서 개발한 플랫폼들 역시 머터리얼 디자인입니다.

Material-ui 홈페이지

위에는 Material-ui 홈페이지로 사용법에 관한 API와 예제를 확인할 수 있습니다.

준비하기

우선 준비할 것은 프로젝트를 생성해주세요 ^^

프로젝트 만드는 법을 모르시는 분들은 밑에 글을 참고하세요

2018/07/06 - [Programming/React] - create-react-app을 이용하여 react typescript의 프로젝트 생성하기

프로젝트를 만들신 후 material-ui를 설치해줍시다.

npm i --save @material-ui/core @material-ui/icons

설치가 됬으면 먼저 TopBar를 만들어 보도록 하겠습니다.

<./src/component/topbar/top.tsx>

import * as React from 'react';

import { WithStyles, withStyles } from '@material-ui/core/styles';

import AppBar from '@material-ui/core/AppBar';

import Toolbar from '@material-ui/core/Toolbar';

import Grid from '@material-ui/core/Grid';

import Typography from '@material-ui/core/Typography';

import styles from './style';

interface Iprops extends WithStyles<typeof styles>{

}

const Topbar : React.SFC<Iprops> = (props) => {

return (

<Grid container={true}>

<AppBar position="static">

<Toolbar>

<Typography variant="title" color="inherit">

To Do List

</Typography>

</Toolbar>

</AppBar>

</Grid>

);

}

export default withStyles(styles)(Topbar);

Topbar의 소스입니다.

우선 Top bar의 컴포넌트는 Stateless 로 만들었습니다.

그리고 Props의 Interface에 Material에 WithStyles를 상속해줬습니다.

제너럴 안에는 style을 넣어줬어요.

그리고 withStyles에 style와 컴포넌트를 default로 export하도록 해놨습니다.

모든걸 안다면 이렇게가 끝일텐데 말이죠 ㅎㅎ;

withStyles 란??

 withSyles란, Style sheet와 Component를 연결해주는 기능을합니다.

위의 연결 후, 스타일이 적용된 컴포넌트를 반환해줍니다.

<./src/component/topbar/style.ts>

import { Theme, createStyles } from '@material-ui/core/styles';

import purple from '@material-ui/core/colors/purple';

const styles = (theme : Theme) => createStyles({

container: {

display: 'flex',

flexWrap: 'wrap',

},

margin: {

margin: theme.spacing.unit,

},

cssLabel: {

'&$cssFocused': {

color: purple[500],

},

},

cssFocused: {},

cssUnderline: {

'&:after': {

borderBottomColor: purple[500],

},

},

bootstrapRoot: {

padding: 0,

'label + &': {

marginTop: theme.spacing.unit * 3,

},

},

bootstrapInput: {

borderRadius: 4,

backgroundColor: theme.palette.common.white,

border: '1px solid #ced4da',

fontSize: 16,

padding: '10px 12px',

width: 'calc(100% - 24px)',

transition: theme.transitions.create(['border-color', 'box-shadow']),

fontFamily: [

'-apple-system',

'BlinkMacSystemFont',

'"Segoe UI"',

'Roboto',

'"Helvetica Neue"',

'Arial',

'sans-serif',

'"Apple Color Emoji"',

'"Segoe UI Emoji"',

'"Segoe UI Symbol"',

].join(','),

'&:focus': {

borderColor: '#80bdff',

boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',

},

},

bootstrapFormLabel: {

fontSize: 18,

},

});

export default styles;

style 부분입니다.

원래 material-ui에서 제공하는 예제와는 좀 차이점도 있습니다.

거기다가 원래 예제에서는 해당 스타일들을 컴포넌트 파일안에 넣어뒀는데 너무 지저분하다 느껴서 저는 밖에

style.ts로 빼놨습니다 ㅋㅋ

"아니 이게 style..??? 제가 아는 CSS랑 다른데 이게 뭔데 이렇게해놔요 ㅡㅡ"

흠... 머터리얼에서는 JSS를 사용한다고 나와있네요 ㅜㅜ

진행하면서 필요에따라 공부해서 쓰세요 저도 몰라요 ㅎㅎㅎㅎㅎ

style sheet는 createStyle이라는 함수로 설정을 해주는데요, 이 함수는 identity 함수로 받은 인수값을 그대로 리턴해줍니다.

그런데 왜써요?? 라고 물으면, typescript에 맞게 변환을 해주는 역할을 해줍니다.

이것만 알면이제 Material-ui framework를 사용하실 수 있습니다 ㅎㅎ

자, 이제 TopBar가 생겼습니다.

나머지 Table Component나 dialogComponent도 마찬가지로 각 각에 맞게 ui를 맞춰 진행해주면....!

짜잔!! 이렇게 완성이 됬습니다.

"아니 지혼자 뚝딱뚝딱하고 다 끝났다는게 말이냐?"

자세한 컴포넌트 코드는 여기로

ToDoList 만드는 것 까지 진행하면 글이 너무 지루해져요 ㅜㅜ

제 깃헙가서 참고해서 진행하길!! 별거없습니다 ㅎㅎㅎㅎㅎㅎ

저희 강아지도 혼자 코딩하는데 여러분들도 제 깃헙보고 잘 하실 수 있을겁니다 ^_^

모르는 것이 있다면 코멘트 남겨주시면 답하겠습니당