프로필 드롭다운박스 outside click event 처리

[nyeoni]

프로필 드롭다운박스 outside click event 처리

이슈에 대한 설명

• 드롭다운 박스 외 바깥을 클릭할 경우 드롭다운박스 안보이게 하기

1. div tabIndex 이용하여 구현

<S.PWrapper
      tabIndex={0}
      onBlur={() => {
        setShow(false);
      }}
    >

크롬 브라우저의 tabIndex=0 은 fousable 한 컴포넌트로 인식하는 것을 이용하여 div 박스에 onBlur 이벤트 추가하여 구현 -> 문제점 : 드롭다운박스 버튼을 누를때 onBlur 이벤트가 적용되어서 페이지 이동이 안됨

2. 훅 사용하기

checkList

주의사항