[React] 버튼 기능 / Badge, ButtonStrap, ButtonGroupStrap

reactstrap의 버튼 Button

 

( 시작하기 전 유의사항 )

태그의 button과 리액트의 컴포넌트 Button은 첫 글자를 대문자로 한다는 점으로 구분

태그와 컴포넌트라는 차이점이 존재

 

[Button / Badge]

import { Badge, Button } from "reactstrap"; // (1)

function ButtonStrap(){
    return(
        <>
            <h1> PRODUCT NAME <Badge color='secondary'>hit</Badge></h1> // (1)
            
            // (2)
            <Button color="warning" outline>
                Accessor <Badge color="dark">4</Badge>
            </Button>
            
            // (3)
            <Badge color="danger" pill>pill</Badge>
            
            // (4)
            <Badge href="http://daum.net" color="warning">GoLink</Badge>
        </>
    )
}

export default ButtonStrap;

 

(1) Button을 사용하기 위해서는 import를 하여 Button의 기능을 가져와야 함

(2) Badge는 꾸미는 용도로 주로 사용

(3) Button의 경우 클릭에 대한 이벤트로 주로 사용하며, outline은 버튼에 이벤트(마우스) 발생 시 채워지는 구조

(4) pill은 채워진 Button을 생성

(5) Badge의 경우 꾸미는 용도로 많이 사용하지만 링크를 활용하기도 함

 

* Reactstrap/bootstrap의 경우 색상은 홈페이지에 존재하며, 주어진 색상 이외에는 사용이 불가능

 

 

---

[ButtonGroup]

위에서는 Button을 하나만 사용했다면, 

Button을 그룹지어 사용하고 싶은 경우에는 ButtonGroup을 사용

import { useState } from 'react';
import {Button, ButtonDropdown, ButtonGroup, DropdownItem, DropdownMenu, DropdownToggle} from 'reactstrap';

function ButtonGroupStrap(){
    const [number, setNumber] = useState(0); // 플러스 마이너스 숫자 업다운 관련 코드
    const [open, setOpen] = useState(false); // 드롭다운 관련 코드
    return(
        <> // (1)
            <ButtonGroup vertical>
                <Button>Left</Button>
                <Button>Middle</Button>
                <Button>Right</Button>
            </ButtonGroup>
            <br/><br/>

            {/* 페이징 처리와 같은 그룹핑 가능 */}
            <ButtonGroup>
                <Button>&lt;</Button>
                <Button>1</Button>
                <Button>2</Button>
                <Button>3</Button>
                <Button>4</Button>
                <Button>&gt;</Button>
            </ButtonGroup>
            <br/><br/>

            {/* 플러스 마이너스 숫자 업다운 */}
            <ButtonGroup>
                <Button onClick={()=>setNumber(number-1)}>-</Button>
                <Button disabled>{number}</Button>
                <Button onClick={()=>setNumber(number+1)}>+</Button>
            </ButtonGroup>
            <br/><br/>

            // (2)
            <ButtonGroup>
                <Button></Button>
                <Button></Button>
                <ButtonDropdown direction="right" isOpen={open} toggle={() => setOpen(!open)}>
                    <DropdownToggle caret>
                        선택
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem>3</DropdownItem>
                        <DropdownItem>4</DropdownItem>
                    </DropdownMenu>
                </ButtonDropdown>

            </ButtonGroup>
        </>
    )
}

export default ButtonGroupStrap;

 

(1) ButtonGroup은 기본적으로 가로로 출력되며, vertical 지정 시 세로로 지정이 가능

(2) ButtonGroup안에 다른 컴포넌트 기능들도 추가가 가능함 (드롭다운과 관련된 설명은 아래 참고)

2023.10.26 - [공부 자료/리액트[React]] - [React] 드롭다운 / DropdownStrap