🚀 React Query를 사용하여 FAQ 관리 성능 개선하기

🚀 React Query를 사용하여 FAQ 관리 성능 개선하기

FAQ 관리 페이지에서 React Query를 도입하면 어떤 장점이 있을까?
이전에는 useState와 useEffect를 사용하여 데이터를 관리했지만,
React Query를 활용하면 API 요청 최적화, 캐싱, 상태 관리 자동화 등 다양한 성능 개선이 가능하다.

---

✅ React Query를 사용하면 좋아지는 점

1️⃣ 자동 캐싱 (데이터 요청 최적화)

📌 기존 방식

• useEffect로 API 요청을 실행하면 항상 새로운 요청을 보내야 함
• 같은 데이터를 다시 요청해도 캐시가 없어서 네트워크 사용량 증가

📌 React Query 사용 시

• useQuery는 기본적으로 데이터를 캐싱하여 불필요한 API 요청을 방지
• 같은 데이터를 여러 번 요청하지 않고, 캐시된 데이터를 우선 반환
• 페이지를 이동했다가 돌아와도 자동으로 최신 데이터를 유지

💡 💻 예제

const { data: faqData } = useQuery({
  queryKey: ['faqs'],
  queryFn: async () => {
    const response = await axiosCookie.get('/api/faq/getAll');
    return response.data.data;
  },
});

✅ FAQ 목록이 캐시되므로, 다시 조회할 때 API 호출을 줄일 수 있다!

---

2️⃣ 상태 관리 자동화 (로딩 & 에러 핸들링 내장)

📌 기존 방식

• useState와 useEffect를 사용하여 로딩 상태(isLoading), 에러 상태(error)를 직접 관리해야 했음
• 추가적인 상태 변수와 조건문이 필요

📌 React Query 사용 시

• useQuery는 isLoading, isError 상태를 자동으로 제공
• 코드가 단순해지고, 로딩/에러 처리가 깔끔해짐

💡 💻 예제

const { data: faqData, isLoading, isError, error } = useQuery(['faqs'], fetchFaqs);

if (isLoading) return <p>로딩 중...</p>;
if (isError) return <p>오류 발생: {error.message}</p>;

✅ 로딩 상태와 에러 처리를 따로 구현하지 않아도 자동으로 가능!

---

3️⃣ 데이터 변경 후 자동 새로고침 (invalidateQueries)

📌 기존 방식

• FAQ를 추가하거나 삭제한 후 목록을 새로 불러와야 함
• useEffect를 다시 실행하거나 setState를 사용하여 강제로 업데이트해야 했음

📌 React Query 사용 시

• invalidateQueries(['faqs'])를 호출하면 자동으로 데이터를 다시 가져옴
• 수동으로 setState를 사용하지 않아도 변경 사항이 즉시 반영됨

💡 💻 예제: FAQ 삭제 후 자동 새로고침

const queryClient = useQueryClient();

const deleteFaq = useMutation({
  mutationFn: async (id) => {
    await axiosCookie.delete(`/api/admin/faq/delete/${id}`);
  },
  onSuccess: () => {
    queryClient.invalidateQueries(['faqs']); // FAQ 목록 새로고침
  },
});

✅ 삭제 후 별도로 fetchFaqs()를 호출할 필요 없이 자동 업데이트!

---

4️⃣ 비동기 요청 최적화 (중복 요청 방지)

📌 기존 방식

• 여러 개의 API 요청이 동시에 실행되면 같은 데이터를 여러 번 요청하는 문제 발생
• 예를 들어, FAQ 목록을 조회하는 중에 또 다른 컴포넌트에서 같은 요청을 실행하면 중복 요청이 발생할 수 있음

📌 React Query 사용 시

• 같은 queryKey를 가진 요청이 진행 중이면 새로운 요청을 보내지 않고 기존 요청을 재사용
• staleTime을 설정하면 일정 시간 동안 API 요청을 보내지 않고 캐시된 데이터를 활용

💡 💻 예제: 중복 요청 방지

const { data: faqData } = useQuery({
  queryKey: ['faqs'],
  queryFn: fetchFaqs,
  staleTime: 1000 * 60 * 5, // 5분 동안 API 재요청 방지
});

✅ 짧은 시간 내에 같은 요청이 발생하지 않도록 최적화 가능!

---

5️⃣ API 응답 최적화 (Optimistic Update)

📌 기존 방식

• FAQ를 수정할 때 API 응답이 올 때까지 UI 업데이트가 지연됨
• 네트워크 속도가 느리면 사용자 경험(UX)이 저하됨

📌 React Query 사용 시

• Optimistic Update를 사용하면, API 요청 전에 UI를 먼저 업데이트
• 즉시 화면에 변경 사항을 반영하고, 요청이 실패하면 원래 상태로 롤백

💡 💻 예제: FAQ 수정 시 UI 즉시 반영

const updateFaq = useMutation({
  mutationFn: async (updatedFaq) => {
    await axiosCookie.put(`/api/admin/faq/update/${updatedFaq.id}`, updatedFaq);
  },
  onMutate: async (newFaq) => {
    await queryClient.cancelQueries(['faqs']);
    const previousFaqs = queryClient.getQueryData(['faqs']);
    
    queryClient.setQueryData(['faqs'], (old) =>
      old.map((faq) => (faq.id === newFaq.id ? { ...faq, ...newFaq } : faq))
    );

    return { previousFaqs };
  },
  onError: (err, newFaq, context) => {
    queryClient.setQueryData(['faqs'], context.previousFaqs);
  },
  onSettled: () => {
    queryClient.invalidateQueries(['faqs']);
  },
});

✅ 수정 후 API 응답을 기다리지 않고, UI를 먼저 업데이트하여 더 빠르게 반응하는 UX 제공!

---

🎯 React Query를 사용한 성능 개선 요약

기능 기존 방식 (useState & useEffect) React Query (useQuery, useMutation) 개선 효과

데이터 요청 최적화	매번 API 요청 필요	캐싱을 활용해 중복 요청 방지	API 부하 감소
로딩 & 에러 관리	수동 상태 관리 필요	isLoading, isError 자동 제공	코드 간결화
데이터 변경 후 새로고침	setState로 수동 업데이트	invalidateQueries 사용	상태 관리 자동화
중복 요청 방지	같은 요청이 중복 실행됨	staleTime 설정 가능	네트워크 최적화
Optimistic Update	API 응답 대기 후 UI 변경	UI를 먼저 업데이트 후 API 요청	사용자 경험 개선

---

🚀 결론: React Query를 사용하면 FAQ 관리가 더 효율적이다!

• ✅ 불필요한 API 요청을 줄이고, 성능을 최적화할 수 있음
• ✅ 자동 캐싱 및 상태 관리로 더 깔끔한 코드 작성 가능
• ✅ Optimistic Update로 빠른 UI 업데이트 가능
• ✅ 데이터 변경 시 자동 새로고침으로 최신 데이터 유지

💡 React Query를 도입하면 유지보수도 쉬워지고, FAQ 관리의 성능이 대폭 개선될 수 있다! 🎯🔥

---