클라이언트 컴포넌트

[MinJeung-Kim]

🖥️클라이언트 컴포넌트

// ./components/Counter.tsx

"use client"; // 클라이언트 컴포넌트 선언.

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount((num) => num + 1)}>
        숫자 증가 시키기
      </button>
    </>
  );
}

1. 동작원리

• 모든 페이지들을 확인하면서 정적 HTML을 생성.

  $ npm run build
  
  - info Collecting page data
  [    ] - info Generating static pages (0/10)안녕👋 - 서버

  

• 클라이언트 컴포넌트 중에 정적 HTML을 만들수 있는 부분을 찾아서 미리 생성.

• 리액트 라이브러리, 실제 컴포넌트가 실행되기 위한 부분적인 코드를 브라우저에 보내서 리액트 컴포넌트로 Hydration이 일어남.

[MinJeung-Kim]

When to use Server and Client Components?