[React] Link의 onClick을 통해 navigate사용하는 경우 navigate이 동작하지 않는 현상

Link태그와 onclick navigate를 함께 사용할 경우 navigate가 동작하지 않는 현상

 

글을 삭제한 후에  다시 글 목록으로 돌아가는 기능을 구현하려고 했다.

Link 태그의 to와 별개로 onclick의 handler를 두어서 다른 작업을 처리한 후에 navigate하는 기능을 만들었지만 동작하지 않았다. handler에서 분명 navigate 달아줬음에도 페이지가 그대로 멈춰있었다.

 

원인은 다음과 같다.

Link테그는 a테그를 기반으로 한다. Link태그를 클릭했을때 onclick function이전에 a테그의 direction만 적용되고 onclick 안에 선언한 navigate는 실행되지 않았다. 나의 경우 Link태그에 to 자체를 설정하지 않았기 때문에 페이지에 그래도 잔류하게 되었던 것이다.

 

해결방법

이를 해결하기 위해서는 html 자체의 동작을 막아주는 event.preventDefault()를 이용해야 한다. onclick에 들어가는 콜백함 수 안에 event.preventDefault() 선언해줌으로서 Link 태그의 동작을 막을 있다.

event.preventDefault()는 a태그 뿐 아니라 form태그에서 submit을 누르는 경우 새로고되는 등의 현상을 막기위해 사용되기도 한다.

 

 

const deleteHandler = (e) => {
    e.preventDefault();
    dispatch(deleteEvent(event));
    navigate("/event", { replace: true });
};
  
  
<Link onClick={deleteHandler}>삭제하기</Link>

 

사실 그냥 button태그를 쓰면 되는데 실수로 태그를 안바꾸고 구현하다가 처음 겪는 현상을 마주해서 알아보았다.