클라이언트 컴포넌트에서 데이터 페칭

// src/app/client-data/page.tsx (새로 생성할 페이지)
// 이 파일은 서버 컴포넌트이지만, 그 안에서 클라이언트 컴포넌트를 임포트하여 사용합니다.

import ClientDataFetcher from './ClientDataFetcher'; // 클라이언트 컴포넌트 임포트

export default function ClientDataPage() {
  return (
    <div>
      <h1>클라이언트 컴포넌트 데이터 페칭 예제</h1>
      <p>이 페이지는 서버 컴포넌트이지만, 아래 데이터는 클라이언트 컴포넌트에서 가져옵니다.</p>
      <ClientDataFetcher />
    </div>
  );
}

// src/app/client-data/ClientDataFetcher.tsx (새로 생성할 클라이언트 컴포넌트)
"use client"; // 이 파일은 클라이언트 컴포넌트임을 명시

import React, { useState, useEffect } from 'react';

interface Todo {
  userId: number;
  id: number;
  todo: string;
  completed: boolean;
}

export default function ClientDataFetcher() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchTodos() {
      try {
        setLoading(true);
        setError(null);
        // 클라이언트 측에서 fetch API를 사용하여 데이터를 가져옵니다.
        const res = await fetch('http://localhost:4000/todos?_limit=5');
        if (!res.ok) {
          throw new Error('Failed to fetch todos');
        }
        const payload = await res.json();
        const data: Todo[] = payload;
        setTodos(data);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchTodos();
  }, []); // 마운트 시 설정; 개발 Strict Mode에서는 추가 실행 가능

  if (loading) {
    return <p>할 일 목록을 불러오는 중입니다...</p>;
  }

  if (error) {
    return <p style={{ color: 'red' }}>에러 발생: {error}</p>;
  }

  return (
    <div style={{ border: '1px dashed #f0ad4e', padding: '15px', marginTop: '20px', borderRadius: '8px' }}>
      <h2 style={{ color: '#f0ad4e' }}>클라이언트에서 가져온 할 일 목록</h2>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.todo}
          </li>
        ))}
      </ul>
      <button onClick={() => alert('클라이언트에서만 가능한 액션!')}>클라이언트 액션</button>
    </div>
  );
}

"use client";

import { useEffect, useState } from 'react';

interface Todo {
  userId: number;
  id: number;
  todo: string;
  completed: boolean;
}

export default function IgnoringLateTodoFetcher({ endpoint }: { endpoint: string }) {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let ignore = false;
    setLoading(true);
    setError(null);
    async function load() {
      try {
        const res = await fetch(endpoint);
        if (!res.ok) throw new Error(`목록 조회 실패: ${res.status}`);
        const data: Todo[] = await res.json();
        if (!ignore) setTodos(data);
      } catch (cause) {
        if (!ignore) setError(cause instanceof Error ? cause.message : '목록 조회 실패');
      } finally {
        if (!ignore) setLoading(false);
      }
    }
    load();
    return () => { ignore = true; };
  }, [endpoint]);

  if (loading) return <p>목록을 불러오는 중입니다...</p>;
  if (error) return <p>{error}</p>;
  return <ul>{todos.map(todo => <li key={todo.id}>{todo.todo}</li>)}</ul>;
}