next js Unhandled Runtime Error Error: use__ only works in Client Components. Add the "use __" 에러

오류 내용

Unhandled Runtime Error
Error: useParams only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

발생한 이유

• 서버 구성 요소에서 React 클라이언트 hook을 사용하고 있음.

방법

• 'use client' 구문을 파일 상단에 추가하여 Hook을 사용하는 구성 요소를 Client 구성 요소로 표시한다.

// 👉 'use client' 추가
'use client'
import { useEffect } from 'react'

export default function Page() {
  useEffect(() => {
    console.log('in useEffect')
  })
  return <p>Hello world</p>
}

공식문서