[Next] 18.서버 액션

서버 액션(Server Actions)은 아주 간단하게 말하면,

폼 데이터를 서버로 직접 보낼 수 있는 새로운 방법이야.
useState, useEffect, fetch 이런 거 다 안 쓰고도 가능해!

 

💥 왜 필요한데?

기존 방식은 이랬지

1. input에서 값 입력
2. useState로 값 저장
3. fetch로 API 요청
4. 서버에서 처리
5. 다시 클라이언트로 응답 받고 상태 업데이트

너무 복잡해…

서버 액션은 이걸 그냥 이렇게 만들어줌

• 폼 제출 → 서버 함수 호출 → 끝

✨ 서버 액션 한 줄 정의

"서버에서 실행되는 함수인데, 클라이언트에서 바로 호출 가능함"

// app/page.tsx
'use client';

export default function Page() {
  async function createPost(formData: FormData) {
    'use server'; // ✅ 이 줄이 핵심! 서버에서만 실행됨

    const title = formData.get('title');
    console.log('서버에서 받은 제목:', title);

    // 예: DB 저장 로직
  }

  return (
    <form action={createPost}>
      <input type="text" name="title" placeholder="제목" />
      <button type="submit">등록</button>
    </form>
  );
}

• use server: 이 함수는 서버에서만 실행된다는 뜻
• action={함수}: 이게 바로 서버 액션을 연결하는 방식
• FormData: 자동으로 form 데이터를 받아옴

---