[Next14] 서버 컴포넌트와 클라이언트 컴포넌트

Next.js 에서 디렉토리에 page.tsx 를 만들고 나면 해당 파일은 자연스럽게 서버 컴포넌트로 지정된다.

서버 컴포넌트에서 useState, useEffect 같은 훅을 사용할 수 없고,
클라이언트 컴포넌트에서만 사용할 수 있기 때문에 page.tsx안에서 클라이언트 컴포넌트라는 것을 지정해 줘야한다.

"use client"
// 이것을 꼭 붙여야 클라이언트 컴포넌트로 작동한다. (훅을 사용할 수 있다.)

import style from '@/app...'
import {useState} from 'react';

export default function Page () {

  const [state, setState] = useState(0);
  
  return (
    <div>
      count : {state}
    </div>
  )
}