[Next] Next.js 13 서버 컴포넌트

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

 

Next.js로 작업 중 useState()를 사용하니까 위 에러가 났다.

 

Next.js 13에선 컴포넌트가 서버에서 렌더링하는 Server Component가 기본적으로 사용된다. 

13으로 올라가면서 app 디렉토리에 있는 모든 컴포넌트가 서버 컴포넌트로 동작한다.

 

공식 문서에서 Server Component와 Client Component를 언제 사용하는지 알려주는데

데이터를 가져오거나, 백엔드 리소스 엑세스, 민감한 정보 보호 같은 서버 기능이 필요한 경우 서버 컴포넌트를,

클라이언트 측 상호작용, 상태관리, 이벤트 처리 등이 필요한 경우 클라이언트 컴포넌트를 결국은 둘 다 사용해야할 때가 있다.

 

위 에러 메세지는 클라이언트 측에서 작동해야하는 상태관리 함수 useState를 사용하려고 하기 때문에 

상호작용 하기 위해선 최상단에 'use client' 를 추가해주면 된다.

 

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}