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

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

'use client';

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

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

'use client';

import { useState } from 'react';

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

두 개의 입력 필드(input)와 버튼을 가진 클라이언트 컴포넌트를 만드세요. 입력 필드에는 숫자를 입력합니다. 버튼을 클릭하면 입력된 숫자들의 합을 단락(paragraph)에 출력하세요.

지시문 'use client'를 제거하세요. 이 경우 NextJS가 서버 컴포넌트 내에서는 상태를 사용할 수 없다는 이유로 오류를 발생시킨다는 점을 확인하세요.