[React] dropDown 이슈2

컴포넌트로 만들어진 button 에서 onClick 이벤트가 발생하지 않을때

[드롭다운 메뉴컴포넌트] 내부에서 사용되는 <button 컴포넌트>로 dropdown이 포커스를
잃으면 onblur 이벤트가 실행 되도록 이루어져 있다.

버튼의 onClick 이벤트가 발생하지 않았던 이유는 버튼의 이벤트가 발생하기 전에 부모 컨테이너인 dropdown내부에서 포커스가 해제되는 blur 이벤트가 먼저 발생하기 때문에 자식컴포넌트인 버튼의 click 이벤트는 발생되기도 전에 사라져버리는 것이다.

이럴 때는 onMouseDown에서 preventDefault를 적용해주면 blur 이벤트를 방지하고 click 이벤트를 적용시킬 수 있도록 합니다.

onClick 이벤트가 발생될 수 있도록 onBlur 이벤트를 막아준다.

function Button(props: ButtonIProps): JSX.Element {
	return (
		<ButtonBox
			onClick={onButtonClickHandler}
			onMouseDown={e => {
				e.preventDefault();
			}}
		>
			<button>
				<span>{buttonName}</span>
			</button>
		</ButtonBox>
	);
}

export default React.memo(Button);

참고
onMouseDown은 마우스를 누른 즉시 발생되고
onClick은 마우스를 눌렀다가 뗄 때 발생됩니다.