[React]onFocus, onBlur

Todo 프로젝트에서 Todo 항목마다 네모 박스를 누르면 드롭다운 메뉴가 나타나는 기능을 구현하고 있었다.

메인화면에 Todo 리스트가 있고, 리스트마다 네모 박스를 누르면 드롭다운 메뉴가 뜨도록 해뒀다.

드롭다운 메뉴가 화면에 하나만 뜨도록 하고 싶었는데 여러 개가 뜨는 문제가 생겼다.

이걸 어떻게 해야하나 고민하고 있던 와중에 onBlur 이벤트를 발견했다!

onBlur와 onFoucs가 세트(?)로 알아야하는 개념인 것 같아서 둘 다 정리해보자~!

 

onFocus

해당 함수를 달아놓은 엘리먼트에 포커스가 됐을 때 호출된다.

 

onBlur

해당 함수를 달아놓은 엘리먼트에 포커스가 사라졌을 때 호출된다.

 

적용

onBlur 이벤트에 드롭다운을 닫는 함수를 등록해서 드롭다운에 포커스가 사라지면 드롭다운이 닫히도록 구현하자!

const [isTodoDropdownModalOpen, setIsTodoDropdownModalOpen] = useState(false);
const closeDropdownModal = () => {
	setIsTodoDropdownModalOpen(false);
};

위의 함수는 드롭다운 닫는 함수이다.

<div onClick={() => {
      setIsTodoDropdownModalOpen(!isTodoDropdownModalOpen);
    }}
    onBlur={closeDropdownModal}
>
 	// div 안의 내용
    
 </div>

 

처음엔 위의 코드처럼 onBlur 이벤트를 등록해주었다.

작동이 잘될거라 예상했지만 작동이 되지 않았다... 

 

div 태그에는 focus를 줄 수 없어서 일어나는 문제였다.

tabIndex를 사용해서 div 태그에 focus를 줄 수 있지만,

focus를 줄 수 있는 태그로 변경하는게 더 간단한 해결방법인 것 같아서 div 태그를 button 으로 변경해주었다.

<button onClick={() => {
      setIsTodoDropdownModalOpen(!isTodoDropdownModalOpen);
    }}
    onBlur={closeDropdownModal}
>
 	// div 안의 내용
    
</button>

위와 같이 변경하니까 원했던 결과가 나왔다.

 

 

프로젝트를 하면서 기록을 더 많이 해둘걸하는 후회가 들었다.

프로젝트가 거의 끝나가지만.. 지금부터라도 알게된 지식들을 잘 정리해보자..!