회사 코드 중 next/link를 사용하면서 href와 onClick를 함께 사용하는 코드가 있었다. onClick 콜백함수 내부에서는 조건에 따라 redirect 시키는 코들들도 있었는데 그런 경우 href 로 이동하는 것은 어떻게 취소되는 것인가 싶어서 정확한 동작 순서를 찾아보았다.
[ 결론 ]
next/link를 사용할 때 href 속성과 onClick 이벤트 핸들러를 함께 사용하면, 기본적으로 onClick 이벤트가 먼저 발생하고, 그 이벤트 핸들러에서 호출된 함수가 완료된 후 페이지 전환(navigation)이 일어난다.
단, onClick 콜백함수 내에서 event.preventDefault()가 호출되면 href 값으로 페이지 전환이 이루어지지 않는다!
이에 따라 순서를 정리해보면 아래와 같을 것이다!
- 사용자가 링크를 클릭
- onClick 이벤트 핸들러가 트리거되고, 이에 지정된 함수가 실행
- onClick 함수 내부에서 event.preventDefault()가 호출되지 않는다면, href에 지정된 대로 페이지 전환이 이루어짐
onClick에서 event.preventDefault()를 호출하면 페이지 전환을 막을 수 있으므로, 이렇게 코드를 쓰면 클릭 이벤트에 따른 추가적인 로직을 실행한 후 수동으로 페이지를 전환하려는 경우에 유용하다. 폼을 제출하기 전에 유효성 검사를 하거나, 상태를 업데이트한 후 페이지를 전환하는 것과 같은 경우 등이 그러한 예가 될 것이다!
끝!
반응형
댓글