Props를 사용하여 use server에서 데이터 받기

React 훅을 사용한 클라이언트 컴포넌트 예제

다음은 사용자 목록을 관리하고, 새로운 사용자를 추가할 수 있는 간단한 클라이언트 컴포넌트 예제입니다. 이 코드는 React 훅인 useState를 사용합니다.

// components/UserList.tsx
'use client'; // 클라이언트 컴포넌트임을 명시

import { useState } from 'react';

export default function UserList({ initialUsers = [] }) {
  // 상태 관리: 사용자 목록과 입력 필드 값
  const [users, setUsers] = useState(initialUsers);
  const [newUser, setNewUser] = useState('');

  // 새로운 사용자 추가 함수
  const addUser = () => {
    if (newUser.trim()) {
      const updatedUsers = [...users, { id: Date.now(), name: newUser }];
      setUsers(updatedUsers); // 사용자 목록 업데이트
      setNewUser(''); // 입력 필드 초기화
    }
  };

  return (
    <div>
      <h1>사용자 목록</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newUser}
        onChange={(e) => setNewUser(e.target.value)}
        placeholder="새로운 사용자 이름"
      />
      <button onClick={addUser}>사용자 추가</button>
    </div>
  );
}

---

코드 설명

1. 클라이언트 컴포넌트 지시자:
   • 'use client';를 파일 상단에 추가하여 이 컴포넌트가 클라이언트에서 실행됨을 명시합니다. 이는 React 훅을 사용할 수 있게 해줍니다.
2. React 훅 사용:
   • useState를 사용하여 두 가지 상태를 관리합니다:
     • users: 사용자 목록을 저장하는 배열.
     • newUser: 입력 필드에 입력된 값을 저장하는 문자열.
3. 사용자 추가 로직:
   • addUser 함수는 입력값이 비어 있지 않을 때 새로운 사용자를 users 배열에 추가하고, 입력 필드를 초기화합니다.
   • Date.now()를 id로 사용하여 각 사용자에게 고유한 키를 부여합니다.
4. 렌더링:
   • 사용자 목록을 <ul> 태그로 렌더링하고, 입력 필드와 버튼을 통해 사용자와 상호작용합니다.

---

서버 컴포넌트와 함께 사용하기

만약 서버 컴포넌트에서 초기 데이터를 가져와 이 클라이언트 컴포넌트로 전달하고 싶다면, 다음과 같이 서버 컴포넌트를 작성할 수 있습니다:

// app/page.tsx
'use server'; // 서버 컴포넌트임을 명시

import UserList from '../components/UserList';

async function fetchInitialUsers() {
  // 예: 데이터베이스나 API에서 초기 데이터 가져오기
  return [
    { id: 1, name: '홍길동' },
    { id: 2, name: '이순신' },
  ];
}

export default async function Page() {
  const initialUsers = await fetchInitialUsers();
  return <UserList initialUsers={initialUsers} />;
}

• 설명: 서버 컴포넌트(Page)는 초기 데이터를 가져와 UserList 클라이언트 컴포넌트에 initialUsers props로 전달합니다. 이후 UserList에서 React 훅을 사용해 상태를 관리하고 상호작용을 처리합니다.

---

요약

• 서버 컴포넌트에서는 React 훅을 사용할 수 없지만, 데이터를 가져오는 역할을 맡습니다.
• 클라이언트 컴포넌트에서는 'use client';를 통해 React 훅(useState, useEffect 등)을 자유롭게 사용할 수 있습니다.
• 위 예제는 useState를 활용해 사용자 목록을 관리하는 간단한 클라이언트 컴포넌트를 보여줍니다.