웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
최근 react에 사용하는 antd UI 라이브러리 업데이트를 계속해서 포스트중입니다. 오늘 내용은 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 컴포넌트에 사용되는 타입 및 프로퍼티 정보를 알아봤습니다. 아래에서 간단한 예제를 만들어보겠습니다.
아래는 몇 가지 형태의 버튼 컴포넌트를 사용한 예제들입니다.
가장 기본적인 모습의 Button 컴포넌트 예제입니다. 클래스를 추가하였고 클릭시 this.showAlert 콜백함수를 호출하게됩니다.
@ 비활성화 버튼 사용하기
비활성화 버튼인 경우 disabled에 true을 적용합니다.
이제 클릭이 되지 않으며 마우스 오버 스타일도 나타나지 않게 됩니다.
@ 아이콘 이미지를 가지는 버튼의 경우
만약 아이콘을 추가할 경우 아래처럼 사용할 수 있죠.
해당하는 아이콘에 버튼에 함께 출력되게 됩니다.
여기까지 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>
className="btn-default"
onClick={ this.showAlert }
>클릭</Button>
가장 기본적인 모습의 Button 컴포넌트 예제입니다. 클래스를 추가하였고 클릭시 this.showAlert 콜백함수를 호출하게됩니다.
@ 비활성화 버튼 사용하기
비활성화 버튼인 경우 disabled에 true을 적용합니다.
<Button
disabled={ true }
>클릭</Button>
disabled={ true }
>클릭</Button>
이제 클릭이 되지 않으며 마우스 오버 스타일도 나타나지 않게 됩니다.
@ 아이콘 이미지를 가지는 버튼의 경우
만약 아이콘을 추가할 경우 아래처럼 사용할 수 있죠.
const iconImg = (
<img
width={24}
height={24}
src='icon_upload.png' />
...
<Button
icon={ iconImg }
>클릭</Button>
<img
width={24}
height={24}
src='icon_upload.png' />
...
<Button
icon={ iconImg }
>클릭</Button>
해당하는 아이콘에 버튼에 함께 출력되게 됩니다.
여기까지 antd의 Button 컴포넌트에 대하여 알아봤습니다.
[react] antd 라이브러리 Input 컴포넌트
