import React from 'react';
import { useQuery } from 'react-query';

// 사용자 데이터를 가져오는 비동기 함수
const fetchUserData = async () => {
  const response = await fetch('/api/user'); // /api/user 엔드포인트로 데이터를 요청
  const data = await response.json(); // 응답 데이터를 JSON 형식으로 변환
  return data; // 변환된 데이터 반환
};

const UserProfile = () => {
  // useQuery 훅을 사용하여 쿼리 실행 및 결과 상태 관리
  const { data, isLoading, isError, error } = useQuery('profileData', fetchUserData);

  if (isLoading) {
    // 데이터 로딩 중일 때
    return <div>Loading...</div>; // "로딩 중..." 메시지 표시
  }

  if (isError) {
    // 데이터 로딩 중에 오류가 발생했을 때
    return <div>Error: {error.message}</div>; // 오류 메시지 표시
  }

  // 데이터 로딩이 완료되고 오류가 없을 때
  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {data.name}</p> {/* 데이터의 이름 속성 표시 */}
      <p>Email: {data.email}</p> {/* 데이터의 이메일 속성 표시 */}
    </div>
  );
};

export default UserProfile;

import React, { useState } from 'react';
import { useMutation, useQueryClient } from 'react-query';

async function createPost(postData) {
  // 서버로 데이터를 전송하고, 생성된 포스트 데이터를 반환하는 로직
  const response = await fetch('/api/posts', {
    method: 'POST',
    body: JSON.stringify(postData),
    headers: {
      'Content-Type': 'application/json',
    },
  });

  const data = await response.json();
  return data;
}

function PostForm() {
  const queryClient = useQueryClient();

  // useMutation 훅을 사용하여 뮤테이션 실행 및 상태 관리
  const [mutate, { data, error, isLoading }] = useMutation(createPost, {
    // 뮤테이션 성공 시, 캐시 업데이트를 수행하는 콜백 함수
    onSuccess: (newPost) => {
      // 기존 캐시에서 'posts' 쿼리 데이터 가져오기
      const previousPosts = queryClient.getQueryData('posts');

      // 새로운 포스트 데이터를 기존 쿼리 데이터에 추가
      queryClient.setQueryData('posts', [...previousPosts, newPost]);
    },
  });

  const [formData, setFormData] = useState({
    title: '',
    content: '',
  });

  // 폼 입력값 변경 시, 상태 업데이트를 처리하는 이벤트 핸들러
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  // 폼 제출 시, 뮤테이션 실행 및 폼 데이터 초기화
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 뮤테이션 실행
      await mutate(formData);
      // 뮤테이션 성공 시, 폼 데이터 초기화
      setFormData({
        title: '',
        content: '',
      });
    } catch (error) {
      // 뮤테이션 실패 시, 에러 처리 로직
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" value={formData.title} onChange={handleChange} />
      <textarea name="content" value={formData.content} onChange={handleChange} />
      {/* 폼 제출 버튼, 로딩 중일 경우 비활성화 */}
      <button type="submit" disabled={isLoading}>
        {isLoading ? '로딩 중...' : '포스트 생성'}
      </button>
    </form>
  );
}

export default PostForm;

import React from 'react';
import { useQueryClient, useQuery } from 'react-query';

// 포스트 데이터를 가져오는 비동기 함수
const getPosts = async () => {
  const response = await fetch('/api/posts'); // /api/posts 엔드포인트로 데이터를 요청
  const data = await response.json(); // 응답 데이터를 JSON 형식으로 변환
  return data; // 변환된 데이터 반환
};

const PostList = () => {
  const queryClient = useQueryClient();
  const { data, isLoading, isError, error } = useQuery('posts', getPosts, {
    // 캐싱 옵션 설정
    cacheTime: 300000, // 데이터 캐싱 시간 설정 (5분)
  });

  if (isLoading) {
    // 데이터 로딩 중일 때
    return <div>Loading...</div>; // "로딩 중..." 메시지 표시
  }

  if (isError) {
    // 데이터 로딩 중에 오류가 발생했을 때
    return <div>Error: {error.message}</div>; // 오류 메시지 표시
  }

  // 데이터 로딩이 완료되고 오류가 없을 때
  return (
    <div>
      <h1>Post List</h1>
      {data.map((post) => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default PostList;

import React from 'react';
import { useQuery } from 'react-query';

const fetchPosts = async () => {
  // 데이터를 가져오는 비동기 함수
  const response = await fetch('/api/posts');
  const data = await response.json();
  return data;
};

const PostsList = () => {
  // 쿼리 훅을 사용하여 데이터를 가져옴
  const { data, status, error } = useQuery('posts', fetchPosts, {
    staleTime: 30000, // 30초 동안 캐시된 데이터가 유효함
  });

  if (status === 'loading') {
    // 데이터 로딩 중일 때
    return <div>Loading...</div>; // "로딩 중..." 메시지 표시
  }

  if (status === 'error') {
    // 데이터 로딩 중에 오류가 발생했을 때
    return <div>Error: {error.message}</div>; // 오류 메시지 표시
  }

  // 데이터 로딩이 완료되고 오류가 없을 때
  return (
    <div>
      <h1>Posts List</h1>
      {data.map((post) => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default PostsList;