최근 react에 사용하는
antd UI 라이브러리 업데이트를 계속해서 포스트중입니다. 오늘 내용은 antd의
Button 컴포넌트에 대하여 알아봅니다.
# antd Button 컴포넌트react 앱에서 버튼의 기능과 화면 구현을 목적으로 antd의
Button 컴포넌트가 사용됩니다. Button 컴포넌트를 사용하여 방문자의 클릭 등의 요청에 필요한 기능을 구현하거나 필요한 정보를 서버에 요청할 수 있습니다.
<Button />antd의 Button 컴포넌트는 기본적으로 아래의 5가지의 타입을 가지고 있습니다.
- Primary // 주요 기능에 사용 됨. 업데이트 등등
- Default // Primary가 주요 기능인 경우 그 외의 목적 등에 사용 가능
- Dashed // Dashed 테두리 스타일
- Text // 클릭 기능의 텍스트 형태 버튼
- Link // 외부 링크 목적아래는
Button 컴포넌트에 사용할 수 있는 property 정보입니다.
href // 이동하게 될 링크 url
block // 부모 크기에 맞추어 width 값을 가짐
danger // 삭제 등 위험 요소에 사용되는 버튼 (빨간색)
disabled // <boolean> 비활성화 상태 여부
ghost // <boolean> 배경색과 텍스트 색의 서로 전환됨. 배경색 transparent
icon // <ReactNode> 버튼과 함께 사용할 아이콘
shape // <circle | round> 도형 형태
type // Button 타입을 지정할 때 사용(primary 등등)
onClick // 클릭시 콜백 함수를 호출여기까지 antd Button 컴포넌트에 사용되는 타입 및 프로퍼티 정보를 알아봤습니다. 아래에서 간단한 예제를 만들어보겠습니다.
! antd Button 컴포넌트 예제아래는 몇 가지 형태의 버튼 컴포넌트를 사용한 예제들입니다.
<Button
className="btn-default"
onClick={ this.showAlert }
>클릭</Button>
가장 기본적인 모습의 Button 컴포넌트 예제입니다. 클래스를 추가하였고 클릭시 this.showAlert 콜백함수를 호출하게됩니다.
@ 비활성화 버튼 사용하기비활성화 버튼인 경우 disabled에 true을 적용합니다.
<Button
disabled={ true }
>클릭</Button>
이제
클릭이 되지 않으며 마우스 오버 스타일도 나타나지 않게 됩니다.
@ 아이콘 이미지를 가지는 버튼의 경우
만약 아이콘을 추가할 경우 아래처럼 사용할 수 있죠.
const iconImg = (
<img
width={24}
height={24}
src='icon_upload.png' />
...
<Button
icon={ iconImg }
>클릭</Button>
해당하는 아이콘에 버튼에 함께 출력되게 됩니다.
여기까지 antd의 Button 컴포넌트에 대하여 알아봤습니다.