프론트엔드에서 Restful API 데이터 동기화 패턴의 진화를 통해 서버 상태를 관리하기: Prop Drilling에서 React Query까지

function Parent() {
  const [todos, setTodos] = useState([]);
  const [users, setUsers] = useState([]);
  const fetchTodos = useCallback(() => axios.get('/api/todos').then(r => setTodos(r.data)), []);
  const fetchUsers = useCallback(() => axios.get('/api/users').then(r => setUsers(r.data)), []);
 
  useEffect(() => { fetchTodos(); fetchUsers(); }, []);
 
  // 두 컴포넌트에 상태와 리프레시 함수 전달
  return (
    <>
      <ComponentA todos={todos} />
      <ComponentB users={users} />
      <ComponentC onRefreshTodos={fetchTodos} onRefreshUsers={fetchUsers} />
    </>
  );
}
 
// ComponentA 컴포넌트
function ComponentA({ todos }) {
  return (
    <div>
      <ul>{todos.map(...)} </ul>
    </div>
  );
}
 
// ComponentB 컴포넌트
function ComponentB({ users }) {
  return (
    <div>
      <ul>{users.map(...)} </ul>
    </div>
  );
}
 
// ComponentC 컴포넌트
export function ComponentC({ onRefreshTodos, onRefreshUsers }) {
 // 리프레시!
  const handleClick = () => {
	  Promise.all([
		  onRefreshTodos(),
		  onRefreshUsers()
	  ])
	  ....
  }
  return (
    <div>
      <h2>리프레시 테스트</h2>
      <button onClick={onRefreshTodos}>전체 리프레시</button>
    </div>
  );
}

const useGlobalStore = create(set => ({
  todoVersion: 0,
  userVersion: 0,
  incTodoVersion: () => set(s => ({ todoVersion: s.todoVersion + 1 })),
  incUserVersion: () => set(s => ({ userVersion: s.userVersion + 1 })),
}));
 
function Parent() {
  return (
    <>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </>
  );
}
 
function ComponentA() {
  const todoVersion = useGlobalStore(s => s.todoVersion);
  const [todos, setTodos] = useState([]);
 
  useEffect(() => {
    axios.get('/api/todos').then(r => setTodos(r.data));
  }, [todoVersion]);
 
  return (
    <div>
      <ul>{todos.map(...)} </ul>
    </div>
  );
}
function ComponentB() {
  const userVersion = useGlobalStore(s => s.userVersion);
  const [users, setUsers] = useState([]);
 
  useEffect(() => {
    axios.get('/api/users').then(r => setUsers(r.data));
  }, [userVersion]);
 
  return (
    <div>
      <ul>{users.map(...)} </ul>
    </div>
  );
}
 
function ComponentC() {
  const incTodoVersion = useGlobalStore(s => s.incTodoVersion);
  const incUserVersion = useGlobalStore(s => s.incUserVersion);
 
  return (
    <div>
      <button onClick={() => { incTodoVersion(); incUserVersion(); }}>전체 리프레시</button>
    </div>
  );
}

import { createBrowserRouter } from 'react-router-dom';
import { fetchTodosQuery, fetchUsersQuery, fetchGridPageQuery } from '@/hooks/queries';
import { QueryClient } from '@tanstack/react-query';
 
// loader 함수 정의 (ensureQueryData 활용)
export const parentLoader = (queryClient: QueryClient) => async () => {
  // a, b 컴포넌트에서 필요한 데이터 미리 캐싱
  await queryClient.ensureQueryData(fetchTodosQuery()); // ['todos']
  await queryClient.ensureQueryData(fetchUsersQuery()); // ['users']
  // C(grid)는 페이지네이션이므로, prefetch 활용 (아래에서 처리)
  return null; // or return 필요한 data
};
 
// 라우터 정의
export const router = (queryClient: QueryClient) =>
createBrowserRouter([
  {
    path: '/',
    element: <ParentPage />, // A, B, C, D 컴포넌트 모두 포함
    loader: parentLoader(queryClient), // loader 등록!
  },
]);

import { QueryClient } from '@tanstack/react-query';
 
import { QueryKey, useQueryClient } from '@tanstack/react-query';
 
export const useStaleQueryRefetch = () => {
  const queryClient = useQueryClient();
 
  const staleQueryRefetch = async (queryKeys: QueryKey | QueryKey[]) => {
    const keys = Array.isArray(queryKeys[0]) ? queryKeys : [queryKeys];
 
    await Promise.all(
      keys.map(key =>
        queryClient.refetchQueries(
          { queryKey: key as QueryKey, stale: true, type: 'active' },
          { cancelRefetch: false }
        )
      )
    );
  };
 
  return { staleQueryRefetch };
};

import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
import ComponentC from './ComponentC';
import ComponentD from './ComponentD';
 
export default function ParentPage() {
  const page = 1; // 예시. 실제로는 useState/useParams 등으로 동적 관리
  return (
    <div>
      <h2>React Query 패턴 총정리 예제</h2>
      <ComponentA />
      <ComponentB />
      <ComponentC page={page} />
      <ComponentD />
    </div>
  );
}
 
import { useQuery } from '@tanstack/react-query';
 
function ComponentA() {
  const { data: todos, isLoading } = useQuery({
    queryKey: ['todos'],
    queryFn: () => fetchTodosQuery(),
  });
 
  return (
    <div>
      <h3>Todos</h3>
      <ul>
        {todos?.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}
 
import { useQuery } from '@tanstack/react-query';
 
function ComponentB() {
  const { data: users, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetchUsersQuery(),
  });
 
  return (
    <div>
      <h3>Users</h3>
      <ul>
        {users?.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}
 
function ComponentC({ page }) {
  const queryClient = useQueryClient();
 
  // 현재 페이지 데이터
  const { data: pageData, isLoading } = useQuery({
    queryKey: ['grid', page],
    queryFn: () => fetchGridPageQuery(page),
  });
 
  // 다음 페이지 미리 prefetch (예: page 이동 예상될 때)
  useEffect(() => {
    queryClient.prefetchQuery({
      queryKey: ['grid', page + 1],
      queryFn: () => fetchGridPageQuery(page + 1),
    });
  }, [page, queryClient]);
 
  return (
    <div>
      <h3>Grid Table (Page {page})</h3>
      <ul>
        {pageData?.items?.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
      {/* 페이지네이션 버튼 등 */}
      ... 코드 생략 ...
    </div>
  );
}
 
function ComponentD() {
  const { staleQueryRefetch } = useStaleQueryRefetch();
 
  const onSearch = () => {
    // 예: todos, users Client 상태가 동일해도 최신화
    // button 디바운싱 조건 추가 및 new QueryClient 시 staleTime의 5000 부여하여 refetchQueries를 지연 호출 한다.
    staleQueryRefetch([['todos'], ['users']]);
  };
 
  return (
    <div>
      ... 검색 조건 컴포넌트 생략 ....
      <button onClick={onSearch}>검색 조건 </button>
    </div>
  );
}