[next.js] 클라이언트 통신방식.

"use client";

import NewsList from "@/components/news-list";
import { useEffect, useState } from "react";

function NewsPage() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();
  const [news, setNews] = useState();
  useEffect(() => {
    async function fetchNews() {
      const response = await fetch("http://localhost:8080/news");

      if (!response.ok) {
        setError("Failed to fetch news.");
        setIsLoading(false);
      }

      const news = await response.json();
      setIsLoading(false);
      setNews(news);
    }

    fetchNews();
  }, []);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>{error}</p>;
  }

  let newsContent;
  if (news) {
    newsContent = <NewsList news={news} />;
  }
  return (
    <>
      <h1>News Page</h1>
      {newsContent}
    </>
  );
}

export default NewsPage;

 

리액트에서도 흔히 사용하는 방식이다.
기존에는 axios를 많이 썼는데, 요즘은 tanstackquery 사용해서 캐싱해버리더라 ㅎ

근데, 이건 권장하지 않는 방법으로 React때나 사용하던 방식.