[React] 리액트 버튼 컴포넌트 만들기 (타입스크립트)

공용으로 사용할 커스텀 버튼 컴포넌트를 만들어보자.

CustomButton.tsx (컴포넌트)

import React from 'react';
type ButtonTypes = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;

export interface ButtonProps extends ButtonTypes {
  onClick: () => void;
  children: React.ReactNode;
}

const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ onClick, className, children, ...props }, ref?: React.Ref<HTMLButtonElement>) => {
   
    const classNames = [className, 'custom-btn'].filter(v => Boolean(v)).join(' ') || undefined;

    return (
      <button ref={ref} className={classNames} onClick={onClick} {...props}>
        {children}
      </button>
    );
  },
);
export default CustomButton;

ButtonTypes 타입을 지정해주고 props들을 받아서 button에 넣어준다. 
className은 받아서 사용한다.

 

사용 (부모)

<CustomButton children={"버튼"} onClick={()=>{console.log('custom button')}} />

 

버튼 스타일

.custom-btn {
  width: fit-content;
  height: 36px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  background-color: map-get($grays, "900"); /* 컬러 정의해서 넣기 */
  border: 1px solid map-get($grays, "900");
  border-radius: 4px;
  display: flex; /* 이모지 등 아이콘이 들어갈수있으므로 flex 처리한다 */
  align-items: center;
  padding: 0 16px;
  color: $white; /* 컬러 정의해서 넣기 */
  line-height: 16px;
  cursor: pointer;
  &.color-white {
    background-color: $white;
    border: 1px solid map-get($grays, "400");
    color: map-get($grays, "900");
    &:hover {
      background-color: map-get($grays, "100");
    }
    &.no-outline {
      border: 0;
    }
    &:disabled {
     color:#fff;
    }
  }
  &:disabled {
    background-color: map-get($grays, "400");
    border-color:map-get($grays, "400");;
    &:hover {
      background-color: map-get($grays, "400");
      cursor: default;
    }
  }
}

 

재사용가능한 기본 버튼 컴포넌트를 만들었다.