categories.map((item) => (
<div key={item.id}>
{item.name}
<FontAwesomeIcon
icon={faX}
color="gray"
size="xs"
cursor="pointer"
params={item.id}
onClick={handleDeleteCategory}
/>
</div>
))
const handleDeleteCategory = (event) => {
console.log(event.target.parentElement.getAttribute('params'));
};
하지만 여기서 문제가 발생했다. 아이콘을 클릭해도, 항상은 아니지만 때떄로 백엔드에 전송할 id가 null로 인식되는 에러가 발생하여 삭제가 정상적으로 진행되지 않았다.
개발자 도구에서 엘리먼트 창을 살펴보니, 아이콘 클릭시 svg 태그가 찍힐 때는 정상적으로 id 값이 인식되지만, 하위에 path 태그가 찍힐 때는 null로 인식되었다. 따라서
categories.map((item) => (
<Hasgtag key={item.name}>
<span>{item.name}</span>
<div params={item.id} onClick={handleDeleteCategory}>
<FontAwesomeIcon
params={item.id}
icon={faX}
color="gray"
size="xs"
/>
</div>
</Hasgtag>
))
위와 같이 아이콘 박스를 div 박스로 감싸고, div 박스에 id 값과 클릭 이벤트를 부여했다. 그리고
const handleDeleteCategory = (event) => {
event.stopPropagation();
console.log(event.target);
const params = event.target.getAttribute('params');
deleteCategory({
variables: {
id: Number(params),
},
});
};
div 박스를 클릭했을 때, 이벤트 전파를 막고 쿼리요청을 보내도록 작성하여 해결하였다!