좋아요 기능을 구현하다, 좋아요 아이콘을 눌러도 상세페이지로 이동하는 일이 생겼다.
좋아요 클릭
alert 발동
상세페이지 이동
좋아요를 클릭하면, alert만 작동 해야한다. 수정해보자.
수정 전 코드
onclick을 props로 받아 호출하고 있다. 여기서 버블링을 막기 위해 stopPropagation을 사용해보자.
Event.stopPropagation()
Event 인터페이스의 stopPropagation() 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, stopPropagation()이 링크나 버튼의 클릭을 막는 것은 아닙니다. - https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation
수정 후 코드
이제, 버블링이 일어나지 않아 좋아요를 클릭하면 alert만 나오게 된다!
'기록 > TIL' 카테고리의 다른 글
| 2023.08.28 (0) | 2023.08.28 |
|---|---|
| 2023.08.25 (0) | 2023.08.25 |
| 2023.08.23 - Jotai use 3신기 사용해보기 (0) | 2023.08.23 |
| 2023.08.22 - lodash로 편하게 Throttle 사용하기 (0) | 2023.08.22 |
| 2023.08.21 - TypeScript url 파라미터로 request를 보내기 위해 배열로 받기, react does not recognize the `~~~` prop on a DOM element. (0) | 2023.08.21 |
