리팩토링 : 이벤트 위임으로 인한 버그

 

아래와 같은 코드에서 onClick이벤트가 li태그에 위임되어서 li태그를 클릭하기만 해도 onClick이벤트가 실행되었다.

아래 움짤을 보자.

<div onClick={handleDeleteButtonClick}>
      ..(생략)..

           <ul>
           {options.map((option, idx) => (
            <li key={idx} onClick={() => handleDropDownClick(option)} className={selected === idx ? "selected" : ""}>
              {option}
            </li>}
           </ul>
      ..(생략)..
    </div>

 

보다시피 <li>태그를 클릭만해도 onClick이 실행되어 delete되고 있다.

 

아래 움짤은 onClick이벤트가 실행되는 태그를 조정한 후 결과이다.

<div className="autocomplete-wrapper" onKeyUp={handleKeyUp} onClick={(e) => e.preventDefault()}>
      
        <i className="fas fa-times" onClick={handleDeleteButtonClick}></i>
        <ul>
        {
        options.map((option, idx) => (
            <li key={idx} onClick={() => handleDropDownClick(option)} className={selected === idx ? "selected" : ""}>
              {option}
            </li>
          ))}
        </ul>
        }
    </div>

 

면접준비를 하면서 이벤트 위임 개념을 알게되어서 해결할 수 있었다.

 

이래서 기술면접을 그렇게 물어보는듯