[React] 드롭다운 / DropdownStrap

드롭다운 기능을 위한 Dropdown

 

드롭다운을 구현하기 위해 사용해야 하는 reactstrap이 여러개인데 묶음으로 알아주는 것이 좋음

아래 코드를 통해 어떻게 사용하는지 자세히 알아보고자 한다

 

[Dropdown]

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

function DropdownStrap(){
    const [open, setOpen] = useState(false); // (1)

    return(
        <>
            // (2), (3)
            <ButtonDropdown direction="right" isOpen ={open} toggle={()=>setOpen(!open)}>
                // (4)
                <DropdownToggle caret color="success" size="lg">버튼 Dropdown</DropdownToggle>
                // (5)
                <DropdownMenu>
                    <DropdownItem header>헤더</DropdownItem>
                    <DropdownItem divider/> // (6)
                    <DropdownItem disabled>비활성화 버튼</DropdownItem>
                    < a href="http://daum.net">
                        <DropdownItem>다음 사이트로 이동</DropdownItem>
                    </a>
                    <DropdownItem onClick={() => alert('Alert 버튼')}>Alert 버튼</DropdownItem>
                </DropdownMenu>
            </ButtonDropdown>
        </>
    )
}

export default DropdownStrap;

(1) 드롭다운의 경우 기본으로 open 해 둘 것인지 close해 둘 것인지 설정이 가능 (기본 설정을 false로 해 둔 것이며 버튼을 클릭해야 open이 가능함, 이는 ButtonDropdown 에서 설정 가능함)

(2) 기본적으로 드롭 다운은 아래로 펼쳐지며, direction을 통해서 펼쳐질 방향 설정이 가능함

(3) isOpen을 통해 드롭다운의 펼침 여부의 기본 설정이 가능함 (1) 과 함께 사용

(4) caret은 드롭다운의 작은 화살표를 추가함을 의미

(5) DropdownMenu를 통해 드롭다운 안에 들어가는 내용들을 묶고 안의 내용은 DropdownItem을 이용해 작성

(6) DropdownItemdp divider를 쓸 경우 아래 선이 생기면서 DropdownItem이 구분됨