[Material-UI 실습] 4. Style (1) - withStyles

Material-UI 컴포넌트에서는 스타일을 적용할 때 스타일 패키지를 이용한다. 물론 CSS를 작성하여 className을 설정해서 스타일을 적용하거나 style 속성에 직접 작성하여 스타일을 적용해도 된다. 스타일 패키지를 이용하면 여러 가지 장점이 있는데 작은 개발 프로젝트를 하는 단계에서는 아직 체감하기는 어렵다.

 

스타일 패키지를 이용하기 위해 다음과 같이 명령어를 입력하여 설치한다.

npm install @material-ui/styles

스타일 패키지는 스타일을 적용시키는 세 가지 방법을 제안한다. Hook API를 사용하는 방법, Styles Components API를 사용하는 방법, HOC(Higher-order component) API를 사용하는 방법이다. 아직 이해한 방법은 HOC(Higher-order component) API를 사용하는 방법뿐이므로 이 방식에 대해서만 설명하겠다. 버튼에 스타일을 적용하는 예제는 다음과 같다.

 

StyleTutorial1.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button'
import { withStyles } from '@material-ui/core/styles';
const styles  = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
    margin : '10px'
  },
};
class StyleTutorial1 extends Component {
  render() {
    const {classes} = this.props;
    return (
      <div>
        <Button className={classes.root}>Button with Style</Button>
        <Button className={this.props.classes.root}>Button with Style</Button>
      </div>
    );
  }
}
export default  withStyles(styles)(StyleTutorial1);

화면의 결과는 다음과 같다.

 

스타일이 적용된 Button 컴포넌트

 

StyleTutorial 컴포넌트는 스타일이 적용된 버튼을 보여준다. 이 컴포넌트에서는 withStyles이라는 HOC를 사용한다. HOC란 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 디자인 패턴으로 작성한 컴포넌트를 말한다. 인자로 받은 컴포넌트의 props를 그대로 유지하고 새로운 값을 추가해준다는 특징이 있다. 이렇게 작성한 컴포넌트는 특정 로직을 재사용하기 쉽다는 장점이 있으며 주로 컴포넌트 이름이 with으로 시작한다.

 

여기서 withStyle 컴포넌트는 styles라는 인자와 StyleTutorial1이라는 인자를 받아 새로운 컴포넌트를 반환한다. 이때 새롭게 반환한 컴포넌트는 인자로 받는 컴포넌트와 크게 다르지 않다. 컴포넌트의 props에 styles에서 정의한 스타일 정보를 적용한 클래스들을 props.classes로 가진다는 점만 다르다. props.classes의 root에는 스타일이 적용된 클래스 이름이 저장되어 있다. 따라서 다음과 같이 Button 컴포넌트에 스타일이 적용된다.

 

이에 대한 설명은 다음을 참고하였다.

https://material-ui.com/styles/basics/

@material-ui/styles - Material-UI

https://velopert.com/3537

컴포넌트에 날개를 달아줘, 리액트 Higher-order Component (HoC) | VELOPERT.LOG

예제 확인

https://jb-material-ui-tutorial.herokuapp.com/

Material UI Tutorial