NextJS 프레임워크의 클라이언트 컴포넌트

이제 우리의 서버 컴포넌트를 클라이언트 컴포넌트로 변경해 보겠습니다. 이를 위해 컴포넌트 파일 시작 부분에 지시문 'use client'를 작성합니다:

src/app/test/page.jsx'use client';

export default function Test() {
  return <h1>hello, user!</h1>;
}

이제 useState를 통해 생성되는 상태(state)를 사용할 수 있게 됩니다. 예를 들어 상태를 생성하고 그 내용을 마크업에 출력해 보겠습니다:

src/app/test/page.jsx'use client';

import { useState } from 'react';

export default function Test() {
  let [name, setName] = useState('user');
  return <h1>hello, {name}!</h1>;
}