리스트를 map 한 뒤 아이콘 클릭시 삭제 이벤트가 의도하지 않게 작동되던 오류

• 리스트를 아래와 같이 map하고, 요소 각각에 onClick 이벤트를 부여해서 선택한 인덱스를 filter 함수를 이용해서 삭제하도록 구현했었다.

         <HashtagBox>
              {hashTagArr.length !== 0
                ? hashTagArr.map((item, index) => (
                    <div key={item}>
                      <div>#{item}</div>
                      <div a={item} onClick={handleDeleteHashTag}>
                        <FontAwesomeIcon icon={faX} size="xs" />
                      </div>
                    </div>
                  ))
                : null}
            </HashtagBox>

• 아래는 삭제하는 함수이다.

  const handleDeleteHashTag = (event) => {
    const deleteObj = event.target.getAttribute('a');
    setHashTagArr(hashTagArr.filter((item) => item !== deleteObj));
  };

• 위에 작성한 내용은 오류를 해결하고 난 뒤의 코드이다. 이전에는 onClick 이벤트를 div가 아닌 icon에 부여했었고 map된 요소의 key와 속성을 item(내용)이 아닌 index를 이용했었다.
• 그리고 삭제하는 함수에서는 인덱스가 들어있는 속성값을 getAttribute 함수를 가져오고, Number 함수를 이용하여 숫자형으로 변경한 뒤 filter 함수를 이용하여 해당 인덱스를 제외했었다.
• 이전에 작성한 글 중에서도 언급했었지만, svg 아이콘을 클릭할 시 가끔 하위의 path 태그가 클릭될 때가 있다. 이럴 경우 부여한 속성과 값이 제대로 인식되지 않아 getAttribute함수를 이용하면 null이 가져와졌고, 이것을 숫자화해서 0으로 변경되었다.
• 따라서 삭제하고 싶은 요소가 제대로 삭제되지 않고 첫번째 요소가 삭제되던 것이였다.
• onClick 이벤트를 상위 div 박스에 부여해서 해결하였다.
• 추가로 map 함수 이용 시 key를 index로 사용하는 것을 추천하지 않는다고 한다. 자세한 내용은 아래 자료에 들어있으며 추후에 이 내용에 대해 자세히 다룰 예정이다.
  참고 자료
  https://medium.com/sjk5766/react-%EB%B0%B0%EC%97%B4%EC%9D%98-index%EB%A5%BC-key%EB%A1%9C-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3ce48b3a18fb
  리엑트 공식 문서
  https://ko.reactjs.org/docs/lists-and-keys.html#gatsby-focus-wrapper