동작하는 폼 만들기

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

일반 HTML에서 폼의 action은 POST 요청을 보낼 URL입니다. Next.js에서는 URL 대신 function을 전달할 수 있습니다:

import { addItem } from './actions';

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

제출(submit) 시 React는 세 가지 작업을 수행합니다. 브라우저의 일반적인 페이지 새로고침 제출을 중단하고, 폼의 이름을 가진 필드들을 FormData 객체로 수집하며, 이를 사용해 해당 action을 호출합니다.

없는 부분에 주목하세요: onSubmit도 없고, event.preventDefault()도 없으며, 상태도 없습니다. 그리고 이 페이지는 여전히 Server Component입니다. action은 전달되는 데이터일 뿐 이벤트 핸들러가 아니므로 경계를 문제없이 넘어갑니다.

한 가지 대비해야 할 점은, 항목이 저장되지만 화면의 목록은 아직 변경되지 않는다는 것입니다. 페이지는 이미 서버에서 렌더링되었으며, 다시 확인하라는 지시를 받지 않았습니다. 두 레슨 후에 한 줄의 코드로 이 문제를 해결할 것입니다.

챌린지

초급

쇼핑 리스트에 입력 필드와 버튼이 있지만, 이것들을 서버에 연결하는 작업이 아직 되어 있지 않습니다. app/actions.js에 action이 이미 작성되어 있습니다.

app/page.jsx에서 './actions'로부터 addItem을 import하세요.
입력 필드와 버튼을 id="add-form" 속성을 가진 <form>으로 감싸세요.
해당 폼에 action={addItem}을 지정하세요.

입력 필드의 name="text" 속성은 그대로 두세요. action이 해당 이름으로 필드 값을 읽어옵니다.

직접 해보기

import './globals.css';

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

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