폼 데이터 읽기

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 31번째.

액션(action)은 하나의 인자, 즉 FormData 객체를 받습니다. 이는 브라우저 내장 객체이며, 다음 메서드 하나만 사용하면 됩니다:

export async function addNote(formData) {
    const text = formData.get('text');
    const author = formData.get('author');
    saveNote(text, author);
}

get()에 전달하는 문자열은 input의 id도 아니고 라벨도 아닙니다. 바로 name 속성입니다:

<input name="author" />      →  formData.get('author')

name이 없는 input은 폼에 보이지 않습니다. 화면에 렌더링되고 내용을 입력할 수도 있지만, 그 값은 절대로 전달되지 않습니다. formData.get()은 null을 반환합니다. 이는 첫 번째 서버 action 폼을 만들 때 가장 흔하게 발생하는 버그이며, 아무런 오류 표시 없이 조용히 실패합니다.

get()은 항상 문자열(또는 null)을 반환하므로 숫자 필드는 변환이 필요합니다:

const quantity = Number(formData.get('quantity'));

챌린지

쉬움

노트 폼(form)이 연결되어 있지만 유용한 내용은 저장되지 않습니다. 입력 필드에 name이 없어서 액션이 두 개의 빈 문자열을 저장합니다.

app/page.jsx에서 첫 번째 input에 name="text"를 추가하고 두 번째 입력 필드에 name="author"를 추가하세요.
app/actions.js에서 빈 문자열을 사용하는 대신 formData에서 두 필드를 읽어오도록 수정하세요.

id는 그대로 유지하고 saveNote(text, author) 호출도 그대로 두세요. 그 위의 두 값만 변경하면 됩니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}