// Redux로 서버 상태 관리 시
const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    data: [],
    loading: false,
    error: null,
    lastFetched: null, // 마지막 조회 시간
    isStale: false,    // 데이터가 오래되었는지
  },
  reducers: {
    fetchPostsStart: (state) => { state.loading = true; },
    fetchPostsSuccess: (state, action) => { 
      state.data = action.payload;
      state.loading = false;
      state.lastFetched = Date.now();
    },
    fetchPostsFailure: (state, action) => { 
      state.error = action.payload;
      state.loading = false;
    },
    markAsStale: (state) => { state.isStale = true; },
  },
});

// 실제 사용
dispatch(fetchPostsStart());
try {
  const posts = await fetchPosts();
  dispatch(fetchPostsSuccess(posts));
} catch (error) {
  dispatch(fetchPostsFailure(error));
}

// 5분마다 데이터 상했다고 표시해야 함
setInterval(() => dispatch(markAsStale()), 5 * 60 * 1000);

// 다른 곳에서 게시글을 작성했으면 목록도 다시 불러와야 함
dispatch(fetchPostsStart()); // 또 호출...

// 클라이언트 상태 - 간단명료
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedTab, setSelectedTab] = useState('home');

// 서버 상태는 React Query에게
const { data: posts, isLoading, error } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  staleTime: 30 * 1000, // 30초는 신선하다고 판단
  gcTime: 5 * 60 * 1000, // 5분간 캐시 유지
});

// 클라이언트 상태는 그대로 useState나 Zustand 등으로
const [isModalOpen, setIsModalOpen] = useState(false);

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MainComponent />
    </QueryClientProvider>
  );
}

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

function TodoList() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['todos'], // 데이터의 고유 식별자
    queryFn: () => axios.get('/todos').then(res => res.data),
  });

  if (isLoading) return <div>로딩 중...</div>;
  if (isError) return <div>에러 발생</div>;

  return (
    <ul>
      {data.map(todo => <li key={todo.id}>{todo.title}</li>)}
    </ul>
  );
}

const queryClient = useQueryClient();

const mutation = useMutation({
  mutationFn: (newTodo) => axios.post('/todos', newTodo),
  onSuccess: () => {
    // 'todos' 키를 가진 쿼리를 무효화 -> 즉시 데이터를 다시 받아옴
    queryClient.invalidateQueries({ queryKey: ['todos'] });
  },
});

// useEffect 사용 예시
useEffect(() => {
  setIsLoading(true);
  fetch(`/products/${productId}`).then(data => {
    setData(data);
    setIsLoading(false);
  });
}, [productId]);

// filter나 sort가 바뀔 때마다 React Query가 감지하고 다시 fetch함
useQuery({
  queryKey: ['todos', filter, sort], 
  queryFn: () => fetchTodos(filter, sort),
});

// ❌ 나쁜 예: 평면적인 키 설계
['todos']
['todoDetail']
['userTodos']

// ✅ 좋은 예: 계층적인 키 설계
['todos']                    // 모든 할일 목록
['todos', 'list']            // 할일 목록
['todos', 'detail', 1]       // 1번 할일 상세
['todos', 'user', 'john']    // john의 할일 목록

const mutation = useMutation({
  mutationFn: (newTodo) => axios.post('/todos', newTodo),
  onSuccess: () => {
    // 방법 1: 모든 todos 관련 쿼리를 무효화
    queryClient.invalidateQueries({ queryKey: ['todos'] });
    
    // 방법 2: 특정 쿼리만 무효화
    queryClient.invalidateQueries({ queryKey: ['todos', 'list'] });
  },
});

// 1. 게시글 목록 조회 (필터링, 페이지네이션 포함)
useQuery({
  queryKey: ['posts', 'list', { category, page }],
  queryFn: () => fetchPosts({ category, page }),
});

// 2. 게시글 상세 조회
useQuery({
  queryKey: ['posts', 'detail', postId],
  queryFn: () => fetchPost(postId),
});

// 3. 내가 쓴 게시글 목록
useQuery({
  queryKey: ['posts', 'my'],
  queryFn: fetchMyPosts,
});

const createMutation = useMutation({
  mutationFn: createPost,
  onSuccess: () => {
    // 모든 게시글 목록 캐시를 무효화 (전체 목록, 내 글 목록 등)
    queryClient.invalidateQueries({ queryKey: ['posts', 'list'] });
    queryClient.invalidateQueries({ queryKey: ['posts', 'my'] });
    // 상세 페이지는 그대로 유지
  },
});

const updateMutation = useMutation({
  mutationFn: ({ postId, data }) => updatePost(postId, data),
  onSuccess: (_, variables) => {
    // 해당 게시글 상세 캐시만 무효화
    queryClient.invalidateQueries({ 
      queryKey: ['posts', 'detail', variables.postId] 
    });
    // 목록도 무효화 (제목이 바뀌었을 수 있으니)
    queryClient.invalidateQueries({ queryKey: ['posts', 'list'] });
  },
});

const deleteMutation = useMutation({
  mutationFn: (postId) => deletePost(postId),
  onSuccess: (_, postId) => {
    // 삭제된 게시글의 상세 캐시 제거
    queryClient.removeQueries({ queryKey: ['posts', 'detail', postId] });
    // 모든 목록 캐시 무효화
    queryClient.invalidateQueries({ queryKey: ['posts', 'list'] });
    queryClient.invalidateQueries({ queryKey: ['posts', 'my'] });
  },
});

// ✅ 좋은 예: 명확한 계층 구조
['resource', 'action', ...params]
['posts', 'list', { filter }]
['posts', 'detail', id]

// ❌ 나쁜 예: 들쑥날쑥한 구조
['postList', filter]
['post', id, 'detail']

// ✅ 좋은 예: 확장성 좋음
['posts', 'list', { category: 'tech', page: 1, sort: 'latest' }]

// ❌ 나쁜 예: 순서가 중요해져서 헷갈림
['posts', 'list', 'tech', 1, 'latest']

// 예: 댓글을 추가했을 때, 게시글의 댓글 목록만 무효화하고 싶다면
['posts', 'detail', postId]              // 게시글 상세
['posts', 'detail', postId, 'comments']  // 해당 게시글의 댓글들

// 댓글 추가 시
queryClient.invalidateQueries({ 
  queryKey: ['posts', 'detail', postId, 'comments'] 
});
// 이렇게 하면 게시글 상세 내용은 그대로 유지되고, 댓글만 새로 받아옴

// staleTime: 30초, gcTime: 5분으로 설정
useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  staleTime: 30 * 1000, // 신선한 시간, 유통기한
  gcTime: 5 * 60 * 1000, // 보관 기간
});

// 1. 유저 정보를 먼저 가져온다
const { data: user } = useQuery({ queryKey: ['user'], ... });

// 2. 유저 ID가 있을 때만 게시글을 가져온다
const { data: posts } = useQuery({
  queryKey: ['posts', user?.id],
  queryFn: fetchPosts,
  enabled: !!user?.id, // user.id가 존재할 때만 실행
});