Next.js 의 <Link> 컴포넌트와 e.preventDefault()

[sunmerrr]

Next.js 13 App Router에서는 는 기본적으로 태그를 포함하지 않기 때문에 onClick 이벤트를 직접 작성할수 있는데,
여기서 e.preventDefault() 를 넣지 않게 되면 의도치 않은 이벤트를 발생시킬 수 있게 된다.

예를 들어

<Link
  href="/about"
  onClick={(e) => {
    if (!isLoggedIn) {
      e.preventDefault();
      alert("로그인 필요");
      router.push('/signin')  
      return
    }
/>

위와 같은 구조에서 if 문 안에 e.preventDefault(); 빠져 있다면 로그인 상태가 아닐때도 는 본인의 기본 동작인 /about 으로 보내기를 시전한다.

반면에 e.preventDefault(); 를 잘 넣어줬다면 기본 이동을 막고, 원하는 동작(위 예시에서는: alert을 띄우고 /signin 페이지로 이동)을 할 수 있게 된다.

결국 는 기본적으로 알아서 클라이언트 라우팅을 처리해주지만
동작을 커스터마이징하려고 하면 그에 대한 책임과 핸들링은 개발자에게 전가된다.