[Zeros] event delegation이 예상한 대로 동작하지 않는 문제

이벤트 버블링으로 생길 수 있는 문제를 막기 위해, 항상 부모 요소에 이벤트를 위임하는 방식으로 코드를 작성하고 있었다. 

 

<label onClick={toggleSelectBox}>
    <input id={id} type="text"/>
    {!isSelectBoxClicked && (<DownArrowIcon size={20}/>)}
    {!isSelectBoxClicked && (<UpArrowIcon size={20}/>)}
</label>
{isSelectBoxClicked && (
    <ul className={styles.optionList}>/*...*/</ul>
)}

 

 

부모 컴포넌트인 label에 이벤트를 위임하면, input이나 Icon에 클릭 이벤트가 발생했을 때에도 label에 등록된 toggleSelectBox가 실행된다. 그래야 하는데 icon을 클릭했을 때 예상한 대로 동작하지 않는 것을 확인할 수 있었다. 그 이유는 다음과 같았다. 

 

1. 사실 icon을 클릭했을 때, label에 등록된 toggleSelectBox 함수가 잘 실행되었다. 
2. 문제는 그 다음 단계에서 일어났는데, icon을 클릭 하면 input에도 클릭이벤트가 발생했다. input이 icon의 부모 요소인 것도 아닌데! 
   • ??? 이유는 잘 모르겠다. icon이 클릭 상태에 따라 렌더링 화면에서 사라지는 것과 관련이 있을까? 
3. input 클릭이 발생했으므로 label에 등록된 toggle 함수가 다시 실행되어서, 원래 상태로 돌아와 버린다.

 

그래서 이런 저런 방법들을 시도해 보았고, 원하는 대로 코드를 동작하게 만들 수 있는 방법을 찾았다.

 

{!isSelectBoxClicked && (
    <DownArrowIcon
        size={20}
        onClick={(event) => event.preventDefault()}
        className={styles.icon}
    />
)}

 

1. icon을 클릭했을 때 preventDefault를 실행하도록 했다.
2. 이 때 여전히 icon을 이루고 있는 태그(svg, path)에는 클릭이벤트가 발생하지만, input에는 클릭 이벤트가 발생하지 않았다. => 코드가 원하는 대로 동작! 
   • ??? 클릭 이벤트의 default 동작이 무엇인지 정확히 알아볼 필요가 있다.