React material UI 를 이용해 커스텀 드롭다운 만들기

React material UI에서 제공하는 기본적인 UI에서 

필요한 기능만 갖고 와서 custom dropdown을 만들어 보았다.

평소에 clickaway listener를 이용하면 

요소가 어느 위치에 있던지 외부 클릭 감지가 잘 된다는 것을 깨닫고 구글링 + 필요한 코드 발췌로 만듬!

 

참고자료 : https://material-ui.com/components/menus/

 

Menu React component - Material-UI

 

사용법

 

buttonText : 보여지는 버튼 내부의 텍스트

dropdownitem : 드롭다운 내부의 아이템

<React.Fragment> </React.Fragment> 으로 감싼 후 안에서 for문 돌려서 디자인.

(현재 사이트에서는 내부의 내용이 어떻게 변할지 예상할 수 없어서 props를 사용하지 않았음)

wrapperClass : 전체를 감싸는 div

 

clickawaylistener : 해당하는 요소의 바깥 영역을 클릭시 리스너 작동

onClickaway로 클릭 감지

open 변수 토글로 메뉴가 켜졌다 꺼졌다

 

 

 

const CustomDropdown = (props) => {
    const buttonText = props.buttonText 
    const dropdownitem = props.dropdownitem
    const wrapperClass = props.wrapperClass ? props.wrapperClass : null
    const [open, setOpen] = React.useState(false);
    const handleClick = () => {
        setOpen(prev => !prev);
      };
    
    const handleClickAway = () => {
         setOpen(false);
    };
    return (
        <>  <ClickAwayListener onClickAway={handleClickAway}>
                <div className={`dropdown ${wrapperClass}`}>
                    <button type="button" onClick={handleClick}>
                        {buttonText}
                    </button>
                    {open ? (
                    <div className="dropdownMenu" onClick={handleClick}>
                        {dropdownitem}
                    </div>
                    ) : null}
                </div>
            </ClickAwayListener>
        </>
    )
}
export default CustomDropdown

 

자바스크립트 하드 코딩으로 드롭다운만들다가 API이용하니 너무 깔끔하고 편하다