인프런 풀스택] next.js 2

강의 출처: [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

개인적으로 정리했습니다!

'use server'은 뭘까?

서버 엑션
app/action.ts

'use server'
export async function create() {

}

원래는

• api/user/route.ts
  이렇게 api를 만들어서

import { NextResponse } from "next/server";

const DB = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

export async function GET(request: Request) {
  const searchParams = new URL(request.url).searchParams;
  const name = searchParams.get("name") as string;

  return NextResponse.json({
    users: DB.filter((user) => user.name.includes(name)),
  });
}

• app/user/page.tsx
  하나하나 fetch 해야했음.

"use client";
import { useEffect, useState } from "react";
import { searchUsers } from "../actions/user-actions";

export default function UsersPage() {
  const [users, setUsers] = useState([]);

  //😕😕이렇게 하나하나 fetch 를 해야했음
  useEffect(() => {
    fetch("/api/users?name=Alice")
      .then((res) => res.json())    
      .then((data) => setUsers(data.users));
  }, []);
  return (
    <main>
      <h1>Users</h1>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </main>
  );
}

'use server'가 생기고

• app/actions/user-actiont.ts
  바로 쉽게 함수만들기!

"use server";

export async function searchUsers(name: string) {
  const DB = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" },
  ];

  return DB.filter((user) => user.name.includes(name));
}

• app/user/page.tsx
  그냥 바로 actions에서 함수 불러와서 편리함

"use client";
import { useEffect, useState } from "react";
import { searchUsers } from "../actions/user-actions";

export default function UsersPage() {
  const [users, setUsers] = useState([]);


  useEffect(() => {
      //⭐⭐ searchUsers바로 action에서 함수가져와서 사용 편리함
    searchUsers("Alice").then((data) => setUsers(data));
  }, []);
  return (
    <main>
      <h1>Users</h1>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </main>
  );
}