[오늘의 Next.js] Warning: Cannot update a component (Router) while rendering a diff

아래와 같이 코드를 짰는데 버튼을 누르지 않아도 router.push('/')가 실행되어버렸다. 

'use client';

import { useRouter } from 'next/navigation';

const DetailLink = () => {
  let router = useRouter();
  return <button onClick={router.push('/')}>버튼</button>;
};

export default DetailLink;

 
위 코드의 문제는 onClick 핸들러에서 router.push 메서드를 직접 호출하는 방식이어서,
렌더링 즉시 router.push 메서드를 바로 실행되어 버린 것이다. 

router.push 메서드를 함수로 감싸서 버튼 클릭 시에만 호출되도록 수정하면 된다. 

'use client';

import { useRouter } from 'next/navigation';

const DetailLink = () => {
  const router = useRouter();

  const handleClick = () => {
    router.push('/');
  };

  return <button onClick={handleClick}>버튼</button>;
};

export default DetailLink;