Client Component (클라이언트 컴포넌트)

Client Component (클라이언트 컴포넌트)

Next.js 버전 13 부터 모든 컴포넌트는 기본적으로 서버 컴포넌트로 간주되게 되었다. 따라서 클라이언트와 상호작용이 필요한 컴포넌트, 예를 들어 로그인 폼 컴포넌트나 회원가입 폼 컴포넌트 같은 컴포넌트들은 컴포넌트 파일 최 상단에 use client라는 지시문으로 명시를 해줘야 한다.

클라이언트 컴포넌트의 예시는 다음과 같다:

• 로그인 컴포넌트: 사용자가 브라우저에 로그인 정보를 입력하고 제출하는 기능을 포함
• 회원가입 컴포넌트: 사용자가 회원가입 정보를 입력하고 제출하는 기능을 포함
• 검색 바: 사용자가 검색어를 입력하고 실시간으로 검색 결과를 표시하는 기능을 포함
• 대화형 위젯: 예를 들어 지도, 차트, 드래그 앤 드롭 인터페이스 등 사용자가 브라우저와 상호작용할 수 있는 모든 UI 요소들
• 폼: 피드백 폼, 댓글 폼, 주문 폼 등 사용자가 데이터를 입력하고 제출하는 모든 종류의 폼.

리뷰 컴포넌트 예제

Review 를 불러오는 컴포넌트에 리뷰를 포스팅하는 기능까지 구현하고 싶을 때: 리뷰 컴포넌트는 서버 컴포넌트로 데이터를 패칭하고, 리뷰 폼 컴포넌트를 따로 만들어 클라이언트 컴포넌트로 리뷰를 제출하는 기능을 처리하게 된다.

폴더 구조는 다음과 같다:

리뷰 컴포넌트 (src/components/Reviews.tsx): reviews 데이터를 서버 컴포넌트로 패칭해서 불러옴.

import ReviewForm from './ReviewForm';

const Reviews = async ({ productId }) => {
  const res = await fetch(`https://api.example.com/products/${productId}/reviews`);
  const reviews = await res.json();

  return (
    <div>
      <h2>Customer Reviews</h2>
      <ul>
        {reviews.map(review => (
          <li key={review.id}>
            <p><strong>{review.author}</strong></p>
            <p>{review.content}</p>
          </li>
        ))}
      </ul>
      <ReviewForm productId={productId} />
    </div>
  );
};

export default Reviews;

ReviewForm 컴포넌트 (src/components/ReviewForm.tsx): 이 컴포넌트는 사용자의 입력정보를 받아야 한다. 즉, 클라이언트와 상호작용이 있는 컴포넌트이기 때문에 클라이언트 컴포넌트라는 명시를 해주고, Redux와 같은 라이브러리를 사용해 리퀘스트를 처리한다.

'use client';

import { useState } from 'react';

const ReviewForm = ({ productId }) => {
  const [author, setAuthor] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch(`https://api.example.com/products/${productId}/reviews`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ author, content }),
      });

      if (res.ok) {
        // Handle successful review submission (e.g., update the UI or notify the user)
      } else {
        throw new Error('Failed to submit review');
      }
    } catch (err) {
      console.error(err);
    }
    setAuthor('');
    setContent('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Author</label>
        <input
          type="text"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
        />
      </div>
      <div>
        <label>Content</label>
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
        ></textarea>
      </div>
      <button type="submit">Submit Review</button>
    </form>
  );
};

export default ReviewForm;

위의 코드를 보면 use client 라는 지시문이 컴포넌트 파일 시작에 명시가 되어있음을 알 수 있다. 이로써 Next.js 는 해당 컴포넌트가 클라이언트에서 실행되어야 하는 컴포넌트라는것을 알게되고 우리는 이 컴포넌트로 클라이언트와 상호작용을 할 수 있게 되는 것이다.