Next.js 13 use 사용해보기

import "./globals.css";
import Image from "next/image";
import SUISTOREIMG from "../../public/images/SUI.jpeg";
import classes from "./page.module.css";
import { getSortedPostsData } from "lib/posts";
import { use } from "react";

export async function getPostsData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();
  return data;
}

export default function Home() {
  const userData = use(getPostsData());

  return (
    <>
      <Image className={classes.SUIIMG} src={SUISTOREIMG} alt={"img"} />
      <div>홈 컨텐츠</div>
      <ul>
        {userData.map((user) => (
          <li key={user.id}> {user.name}</li>
        ))}
      </ul>
    </>
  );
}

use Hook을 사용하면 좀 더 깔끔하게 data fetching을 할 수 있다.