🤩 React JS로 사용자 지정 버튼 구성 요소 구축

이것은 Custom UI Components With React 시리즈의 많은 🛎️ 중 첫 번째 부분입니다. 이 게시물에서는 React JS에서 다양한 소품과 스타일을 사용하여 사용자 지정 버튼 구성 요소를 만드는 방법을 살펴봅니다.

아래는 이 튜토리얼에서 빌드할 데모입니다.

✔️ 버튼 컴포넌트 소품

우리는 이 구성 요소에 대한 몇 가지 소품을 가지므로 외부에서 이를 사용자 정의하거나 수정하는 방법을 제어할 수 있습니다. 소품은 다음과 같습니다.

btnColor - 이 소품은 버튼의 색상을 결정합니다.

labelColor - 이 소품은 버튼 내부의 텍스트 색상을 결정합니다. 기본적으로 white 이지만 btnColor 에 따라 올바른 대비를 갖도록 변경할 수 있습니다.

onClick - 이것은 onClick 핸들러가 버튼에 표시됩니다.

type - 이 소품은 버튼의 스타일을 결정합니다. 값은 outline | block | rounded 중 하나입니다. 이 소품이 전달되지 않으면 버튼에 기본 스타일이 적용됩니다.

스타일 - 이 소품에는 외부에서 버튼 구성 요소를 제공하려는 사용자 지정 스타일이 있습니다.

disabled - 이 소품은 버튼이 활성 상태인지 여부를 결정합니다.

🃏버튼의 기본 스타일링

버튼에 몇 가지 기본 스타일을 부여합니다. 여기에서 button.module.css 파일을 생성한 다음 다음과 같이 버튼에 몇 가지 기본 스타일을 제공하기 위해 btn 클래스를 추가합니다.

/* button.module.css */

.btn {
    font-family: 'Ubuntu', sans-serif;
    position: relative;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 2;
    height: 50px;
    transition: all 200ms linear;
    border-radius: 4px;
    width: 240px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 12px 35px 0 rgba(16, 39, 112, .25);
    outline: 0;
    text-transform: capitalize;
}

💠 버튼 기능 컴포넌트 생성

이제 사용자 정의 버튼 구성 요소를 생성할 파일Button.js을 생성합니다. 이 파일에서는 styles 파일에서 button.module.css를 가져옵니다. 여기에서 기본 HTMLbutton 요소를 반환하고 btn에서 styles 클래스를 추가합니다. 모든 소품을 분해합니다.

//Button.js

import React from 'react';
import styles from './button.module.css';

const Button = ({ children, onClick, btnColor = 'teal', labelColor, disabled, type, style, ...props }) => {
    return (
        <button
            className={styles.btn}
        >
            {children || 'label'}
        </button>
    );
};

export default Button;

이제 이 파일Button.js에서 다양한 유형의 버튼에 대한 몇 가지 스타일 객체를 생성합니다.

//Button.js

    const commonStyles = {
        backgroundColor : btnColor,
        color           : labelColor || 'white'
    };
    const outlineStyles = {
        border          : `1px solid ${btnColor}`,
        color           : btnColor,
        backgroundColor : 'white'
    };
    const outlineHoverStyle = {
        color           : labelColor || 'white',
        backgroundColor : btnColor
    };

    const roundedStyle = {
        backgroundColor : btnColor,
        color           : labelColor || 'white',
        borderRadius    : '25px'
    };
    const disabledStyle = {
        cursor          : 'default',
        backgroundColor : btnColor,
        color           : labelColor || 'white',
        opacity         : 0.4
    };
    const blockStyles = {
        width  : '95%',
        margin : '0 auto'
    };

여기에는 모든 유형의 버튼에 추가될 btnColor에 따른 공통 스타일이 있습니다. 반면에 다른 모든 스타일은 버튼의 type에 따라 조건부로 추가됩니다. 여기서 outline 유형의 경우 두 가지 경우가 있습니다. 첫 번째는 버튼 유형이 개요일 때 추가되는 기본 outlineStyles이고 다른 경우는 버튼 위로 마우스를 가져갈 때입니다.

따라서 호버 상태를 추적하기 위해 호버 스타일을 조건부로 추가할 state react hook로 useState() 호버를 생성합니다. Javascript 이벤트 처리기onMouseEnter 및 onMouseLeave를 사용하여 hover 상태를 토글합니다.

이제 자바스크립트에 간단한 switch 문을 추가하여 버튼 유형에 따라 스타일을 조건부로 렌더링합니다.

//Button.js
    let btnStyle;
    switch (type) {
        case 'rounded':
            btnStyle = roundedStyle;
            break;
        case 'block':
            btnStyle = blockStyles;
            break;
        case 'outline':
            if (hover) {
                btnStyle = outlineHoverStyle;
            }
            else {
                btnStyle = outlineStyles;
            }
            break;
        default:
            btnStyle = {
                backgroundColor : btnColor,
                color           : labelColor || 'white'
            };
            break;
    }

그게 전부입니다. 이제 소품에서 버튼으로 전달된 모든 btnStyle와 함께 이 style를 추가하고 버튼에 disabled 소품이 있는 경우 비활성화된 스타일도 추가합니다. 최종 코드는 다음과 같습니다.

//Button.js

import React, { useState } from 'react';
import styles from './button.module.css';

const Button = ({ children, onClick, btnColor = 'teal', labelColor, disabled, type, style, ...props }) => {
    const [
        hover,
        setHover
    ] = useState(false);
    const toggleHover = () => {
        setHover(!hover);
    };
    const commonStyles = {
        backgroundColor : btnColor,
        color           : labelColor || 'white'
    };
    const outlineStyles = {
        border          : `1px solid ${btnColor}`,
        color           : btnColor,
        backgroundColor : 'white'
    };
    const outlineHoverStyle = {
        color           : labelColor || 'white',
        backgroundColor : btnColor
    };

    const roundedStyle = {
        backgroundColor : btnColor,
        color           : labelColor || 'white',
        borderRadius    : '25px'
    };
    const disabledStyle = {
        cursor          : 'default',
        backgroundColor : btnColor,
        color           : labelColor || 'white',
        opacity         : 0.4
    };
    const blockStyles = {
        width  : '95%',
        margin : '0 auto'
    };
    let btnStyle;
    switch (type) {
        case 'rounded':
            btnStyle = roundedStyle;
            break;
        case 'block':
            btnStyle = blockStyles;
            break;
        case 'outline':
            if (hover) {
                btnStyle = outlineHoverStyle;
            }
            else {
                btnStyle = outlineStyles;
            }
            break;
        default:
            btnStyle = {
                backgroundColor : btnColor,
                color           : labelColor || 'white'
            };
            break;
    }
    return (
        <button
            style={

                    disabled ? { ...commonStyles, ...btnStyle, ...disabledStyle, ...style } :
                    { ...commonStyles, ...btnStyle, ...style }
            }
            onMouseEnter={toggleHover}
            onMouseLeave={toggleHover}
            {...props}
            type="button"
            onClick={

                    !disabled ? onClick :
                    () => {}
            }
            className={styles.btn}
        >
            {children || 'button'}
        </button>
    );
};

export default Button;

Here 라이브 데모를 보고 이 구성 요소와 상호 작용할 수 있습니다.
이 튜토리얼을 이해할 수 있기를 바랍니다. 이와 같은 더 많은 튜토리얼을 보려면 제 개인 블로그satishnaikawadi.me를 방문하세요. 읽어주셔서 감사합니다 😇.