이벤트Error - preventdefault 사용
Today
오늘 개인과제를 진행하다가 문제가 발생하였다. 아래의 사진처럼 메인페이지에 삭제버튼이 있고, 사진을 누르면 상세페이지로 이동하도록 해두었다. 그런데, 삭제버튼을 눌러도 바로 적용되지 않고 상세페이지로 이동하는것이 아닌가? 삭제버튼은 상세페이지에서도 같은위치에 있기에 상세페이지에서 삭제 버튼을 누르면 잘 적용이 되었다. 원인을 알기위해 코드를 살펴보았다.
아래의 코드는 메인페이지에서 사진들을 가지고오는 부분이다. post_list라는 사진목록데이터에서 반복문을 통해 Post(사진하나)씩 가지고 오는 식으로 코드를 작성하였다. 그리고 Post(사진)을 클릭하면 상세페이지(detail)로 이동하도록 history로 연결해 주었다.
Reason
그리고, 아래의 사진은 Postlist.js(위 사진)에 적혀있던 Post 컴포넌트에서 삭제버튼 부분의 코드이다. 문제가 발생한 이유는 코드의 순서를 보면 바로 눈치챘을 것이다. 위에서 적은바와 같이 삭제버튼은 Post.js안에 있는 요소이고, Postlist에서 detail(상세페이지)로 가도록 적은 Post가 삭제버튼을 감싸고 있기 때문에 삭제버튼을 눌러도 먼저 detail로 이동을 했던 것이다.
Solution
이것을 해결하는 가장 간단한 방법은, 사실 Postlist.js에 적힌 history부분을 Post.js안에 image(사진)부분으로 옮겨 적기만 하면 되는 것이지만, 위와 같은 상태에서도 문제를 해결하는 방법을 찾다가, preventDefault에 대해서 알게 되었다. 간단하게 말하면, a, submit, button태그와 같은 클릭이벤트 외의 별도의 브라우저 행동을 막기 위해 사용되어지는 것으로, preventDeafault를 사용하여, Post에 history.push 행동을 막고 버튼 이벤트가 되도록 해주는 것이다. 사용방법은 간단하다. 아래의 사진과 같이 클릭을 했을때, 이벤트를 전달시켜, preventDefault로 막아주면 끝이다. 이렇게 해서, 코드의 이동이나 수정 없이, 아래의 부분을 추가해주는 것만으로 삭제버튼이 잘 동작하였다.
