Server Actions — 서버에서 실행되는 함수, form 없이 API 없이
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Server Actions를 정의할 때 파일 또는 함수 맨 위에 반드시 작성해야 하는 지시어는?
💡 "use server" 지시어를 파일 상단 또는 async 함수 내부 첫 줄에 작성해야 해당 함수가 Server Action으로 동작합니다.
Q2. Server Action을 HTML form의 action 속성에 연결했을 때 얻을 수 있는 장점은?
💡 Server Actions는 HTML 네이티브 form submit을 활용하므로 JavaScript가 비활성화된 환경에서도 동작합니다. 이를 Progressive Enhancement라고 합니다.
Q3. Server Action 실행 후 특정 페이지의 캐시를 무효화하려면 어떤 함수를 사용해야 하는가?
💡 revalidatePath("/경로")를 호출하면 해당 경로의 캐시가 무효화되어 다음 요청 시 최신 데이터가 서버에서 다시 페칭됩니다.
Q4. Client Component에서 Server Action에 추가 인수를 전달하는 올바른 방법은?
💡 .bind(null, arg) 패턴을 사용하여 Server Action에 추가 인수를 전달합니다. 이때 전달하는 인수는 직렬화 가능한 값이어야 합니다.
Q5. useFormStatus() 훅의 올바른 사용 목적은?
💡 useFormStatus()는 { pending } 객체를 반환하며, 폼이 서버에 제출되는 동안 pending이 true가 됩니다. 이를 이용해 버튼을 비활성화하거나 로딩 스피너를 표시합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.