인프런 커뮤니티 질문&답변

export default function PostArticle({ children, post }: Props) {
  const router = useRouter();
  const onClick = () => {
    console.log(1);
    router.push(`/${post.User.id}/status/${post.postId}}`);
  };
  return (
    <article className={style.post} onClickCapture={onClick}>
      {children}
    </article>
  );
}

이 부분에서 onClickCapture에 대한 질문이 있습니다.

캡쳐링 단계에서 onClickCapture의 클릭함수가 실행된다면

자식인 <Link> 영역을 눌러도 <article>의 onClickCapture가 캡쳐링 단계에서 먼저 동작하여 <Link> 태그의 href 경로가 아닌 router.push()로 동작 해야한다고 생각하였습니다.

그러나 실제 <Link>태그를 클릭하면 콘솔에 1이 찍히지만 router.push() 경로가 아닌 <Link>태그의 href경로로 이동하더군요. 이 부분이 잘 이해가 안됩니다..