Material-ui

요즘은 거의 Material-ui를 이용해 컴포넌트를 작성하고 있다. 처음엔 Storybook도 써봤는데, 아무래도 주니어 프론트엔드 개발자가 아토믹 디자인으로 컴포넌트들을 처음부터 작성하는 것이 무리였나보다. 개발 속도가 너무 더뎌서 결국 Material-ui를 이용해 만드는 것으로 변경했다.
Material-ui가 자기만의 색깔이 강하긴 한데, 커스텀의 여지가 생각보다 많아서 점점 익숙해지고 있고, 나름? 머티리얼처럼 보이지 않게 만들어지고 있는것 같기도 하다.

style

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

컴포넌트 하나씩 스타일링을 할 때는 저렇게 임포트 해온다.

const useStyles = makeStyles((theme: Theme) => createStyles ({
  root: {
    color: 'black',
    padding: theme.spacing(2),
  }
});

위와같이 스타일링을 해줄수 있다. 컴포넌트에 const classes = useStyles(); 를 선언해준 후 엘레멘트에 className={classes.root} 와 같이 속성을 넣어주면 color: black, padding: theme.spacing(2)로 설정이 된다.
문자열로 지정해놓은 스타일과, theme을 이용한 스타일이 있는데 문자열로 지정한 스타일은 Material-ui에서 지원하지 않거나 내가 직접 스타일링을 하고싶을때 문자열 안에 css 값을 넣어주면 된다. theme를 이용하는 방법은 Material-ui에서 준비되어 있는 Theme이 있어서 Material-ui의 Theme을 이용해서 빠르게 작성하고 싶을때 이용한다.

makeStyles, createStyles

makeStyles와 createStyles의 내용은 makeStyles, createStyles를 참고했다.

makeStyles와 createStyles뿐 아니라 styled, withStyles, withTheme 등 여러가지 방법이 있는 듯 하지만 아직 모름ㅋ

Material-ui를 계속 쓰다보니 생산성이 좋아서 자주 쓸 것 같다. 그리고 이 포스트는 스타일링 방법을 익힐때마다 계속 업데이트 될 예정이다.

그리고 Styled-Components도 제대로 쓸 줄 알아야 하지 않을까? 할게 너무 많다.