[React] 컴포넌트에 스타일을 적용해보자 ② Button

2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등)

2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트

2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자

2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가

2020/10/07 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ① Text

---

 지난 시간에 이어서 이번에는 버튼 컴포넌트에 스타일을 적용해보겠습니다. Button이라고 전에 만들었던 Text와 크게 다르지 않으니, 아직 전 포스팅을 보지 않은 분들은 꼭 확인 부탁드립니다. 그럼 바로  Button.jsx 가시죠!

 

// ..\test_project\src\components\Button.jsx

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import withStyles, { css } from "../styles/withStyles";

class Button extends PureComponent {
  render() {
    // 상위 컴포넌트에서 넘어오는 프로퍼티
    const {
      // 스타일 옵션 값들 (boolean)
      xsmall,
      small,
      medium,
      large,
      xlarge,
      primary,
      secondary,
      styles, // withStyles에서 정의한 스타일 목록
      children, // Text태그로 감싼 부분 <Text>children(문자 내용)</Text>
      disabled, // 버튼 비활성화
      onClick, // 클릭 이벤트 함수
    } = this.props;
    return (
      // 전개 연산자를 사용해 button 엘리먼트 적용
      <button
        {...css(
          styles.default,
          xsmall && styles.xsmall,
          small && styles.small,
          medium && styles.medium,
          large && styles.large,
          xlarge && styles.xlarge,
          primary && styles.primary,
          secondary && styles.secondary
        )}
        disabled={disabled}
        onClick={onClick}
      >
        {children}
      </button>
    );
  }
}

// children(버튼 내용) 필수, 나머지는 중복 가능한 옵션 값
Button.propTypes = {
  children: PropTypes.node.isRequired,
  xsmall: PropTypes.bool,
  small: PropTypes.bool,
  medium: PropTypes.bool,
  large: PropTypes.bool,
  xlarge: PropTypes.bool,
  primary: PropTypes.bool,
  secondary: PropTypes.bool,
  disabled: PropTypes.bool,
  onPress: PropTypes.func,
};

// 디폴트 프로퍼티 값
Button.defaultProps = {
  xsmall: false,
  small: false,
  medium: false,
  large: false,
  xlarge: false,
  primary: false,
  secondary: false,
  disabled: false,
  onClick: () => {},
};

// withStyles()함수를 사용해 defaultStyles.js 내용으로 매칭
export default withStyles(({ color, size }) => ({
  default: {
    color: color.default,
    borderColor: color.black,
    backgroundColor: color.white,
    fontSize: size.medium,
    padding: 5,
    border: 2,
    borderRadius: 5,
    borderStyle: "solid",
    cursor: "pointer",
  },
  xsmall: {
    fontSize: size.xsmall,
    padding: 2,
  },
  small: {
    fontSize: size.small,
    padding: 4,
  },
  medium: {
    fontSize: size.medium,
    padding: 6,
  },
  large: {
    fontSize: size.large,
    padding: 8,
  },
  xlarge: {
    fontSize: size.xlarge,
    padding: 10,
  },
  primary: {
    color: color.white,
    borderColor: color.black,
    backgroundColor: color.primary,
  },
  secondary: {
    color: color.black,
    borderColor: color.white,
    backgroundColor: color.secondary,
  },
}))(Button);

 

 전 포스팅인 Text 컴포넌트에 스타일을 적용했던 내용과 같습니다. 버튼 관련 스타일 옵션과 이벤트가 추가된 정도입니다. 지난번에도 언급했듯이 중요한 부분은 Button 태그에 엘리먼트를 추가하는 부분입니다.

다시 설명하자면 withStyles()에서 정의된 것을 styles 프로퍼티를 이용해 css로 뿌려주는 것입니다. 그럼 스토리북 작성해 보시죠!

 

// ..\test_project\src\stories\Story_TestButton.jsx

import React from "react";
import { storiesOf } from "@storybook/react";
import Button from "../components/Button";
import { action } from "@storybook/addon-actions";

storiesOf("Test Button", module)
  .addWithJSX("base", () => <Button>내마음에 저장</Button>)
  .addWithJSX("xsmall", () => <Button xsmall>내마음에 저장</Button>)
  .addWithJSX("small", () => <Button small>내마음에 저장</Button>)
  .addWithJSX("medium", () => <Button medium>내마음에 저장</Button>)
  .addWithJSX("large", () => <Button large>내마음에 저장</Button>)
  .addWithJSX("xlarge", () => <Button xlarge>내마음에 저장</Button>)
  .addWithJSX("primary", () => <Button primary>내마음에 저장</Button>)
  .addWithJSX("secondary", () => <Button secondary>내마음에 저장</Button>)
  // 두가지 옵션을 동시에 사용
  .addWithJSX("xlarge & secondary", () => (
    <Button xlarge secondary>
      내마음에 저장
    </Button>
  ))
  // 클릭 이벤트와 스타일 적용
  .addWithJSX("onClick & primary", () => (
    <Button primary onClick={action("onClick 이벤트")}>
      내마음에 저장
    </Button>
  ))
  // 클릭 이벤트와 disabled 적용
  .addWithJSX("onClick & disabled", () => (
    <Button disabled onClick={action("onClick 이벤트")}>
      내마음에 저장
    </Button>
  ));

 

 스토리북도 지난 포스팅과 크게 다르지 않습니다. 클릭 이벤트를 보기 위해 action 확장 도구가 추가된 정도입니다. 아래 화면처럼 onClick & primary 메뉴를 선택하고 버튼을 클릭하면 Actions탭에서 로그를 확인할 수 있습니다.

 

스토리북 버튼 액션

 

 오늘은 여기까지 입니다. 조금씩 컴포넌트가 쌓여가니 기분이 좋습니다.

 

리액트 참 좋죠?

---

2020/10/08 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ③ Checkbox