Next.js 기초 입문 15주차: 폼(Form) 처리 기초 학습 가이드

📌 이번 회차 학습 목표

• Next.js 컴포넌트 내에서 기본적인 HTML 폼을 생성할 수 있습니다.
• React의 useState 훅을 사용하여 폼 입력 필드의 상태를 관리할 수 있습니다.
• 폼 제출(submit) 이벤트를 처리하고 사용자 입력값을 읽어올 수 있습니다.
• 제어 컴포넌트(Controlled Component)의 개념을 이해하고 적용할 수 있습니다.

📝 개념 설명

웹 애플리케이션에서 폼(Form)은 사용자로부터 정보를 입력받는 가장 기본적인 방법입니다. 로그인, 회원가입, 게시글 작성 등 다양한 기능에 필수적으로 사용됩니다. Next.js는 React 기반이므로, React의 폼 처리 방식을 그대로 따릅니다. 핵심은 상태(State)를 통해 폼 입력값을 관리하는 것입니다.

HTML 폼과 React의 제어 컴포넌트

전통적인 HTML 폼은 사용자가 입력 필드에 값을 입력하면, 해당 값이 필드 자체의 내부 상태로 관리됩니다. 하지만 React에서는 폼 입력 필드의 값을 React 컴포넌트의 상태로 관리하는 방식을 권장하는데, 이를 제어 컴포넌트(Controlled Component)라고 합니다.

제어 컴포넌트의 주요 특징은 다음과 같습니다:

• 폼 요소의 value 속성이 React 상태에 의해 제어됩니다.
• 폼 요소의 변경(예: 사용자 입력)은 onChange 이벤트 핸들러를 통해 React 상태를 업데이트합니다.
• 상태가 업데이트되면 컴포넌트가 다시 렌더링되고, 폼 요소의 value가 새로운 상태 값으로 반영됩니다.

이러한 방식은 폼 데이터의 유효성 검사, 조건부 활성화/비활성화, 여러 입력 필드 간의 상호작용 등을 훨씬 쉽게 구현할 수 있도록 합니다.

useState 훅을 이용한 폼 상태 관리

React의 useState 훅은 함수형 컴포넌트에서 상태를 관리하는 가장 기본적인 방법입니다. 폼 입력 필드의 현재 값을 저장하고 업데이트하는 데 사용됩니다.

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState(''); // 초기값은 빈 문자열

  const handleChange = (event) => {
    setInputValue(event.target.value); // 입력 필드의 현재 값으로 상태 업데이트
  };

  return (
    <input type='text' value={inputValue} onChange={handleChange} />
  );
}

위 코드에서 inputValue는 입력 필드의 현재 값을 나타내며, setInputValue는 이 값을 변경하는 함수입니다. 사용자가 입력 필드에 타이핑할 때마다 handleChange 함수가 호출되어 inputValue 상태를 업데이트합니다.

폼 제출(Submit) 이벤트 처리

폼이 제출될 때(예: 제출 버튼 클릭 또는 Enter 키 입력) 특정 로직을 실행해야 합니다. HTML 폼의 onSubmit 이벤트 핸들러를 사용하여 이를 처리할 수 있습니다.

const handleSubmit = (event) => {
  event.preventDefault(); // 기본 폼 제출 동작 방지
  console.log('폼 제출됨:', inputValue);
  // 여기에 서버로 데이터를 보내거나 다른 로직을 추가합니다.
};

return (
  <form onSubmit={handleSubmit}>
    <input type='text' value={inputValue} onChange={handleChange} />
    <button type='submit'>제출</button>
  </form>
);

event.preventDefault()는 브라우저의 기본 폼 제출 동작(페이지 새로고침)을 막는 데 매우 중요합니다. Next.js와 같은 SPA(Single Page Application)에서는 페이지 새로고침 없이 비동기적으로 데이터를 처리하는 것이 일반적이기 때문입니다.

💡 예제 & 실습

간단한 사용자 이름 입력 폼을 만들고, 제출 시 입력된 이름을 콘솔에 출력하는 예제를 통해 폼 처리의 기초를 다져보겠습니다.

단계 1: Next.js 프로젝트 설정 (이미 되어있다면 건너뛰세요)

npx create-next-app my-form-app
cd my-form-app

단계 2: 폼 컴포넌트 생성

app 디렉토리 안에 page.js 파일을 다음과 같이 수정합니다. (또는 components 폴더를 만들고 그 안에 MyForm.js 파일을 생성한 후 page.js에서 임포트하여 사용해도 됩니다.)

// app/page.js
'use client'; // 클라이언트 컴포넌트임을 명시

import React, { useState } from 'react';

export default function HomePage() {
  const [username, setUsername] = useState(''); // 사용자 이름 상태

  // 입력 필드 값이 변경될 때 호출되는 핸들러
  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  // 폼이 제출될 때 호출되는 핸들러
  const handleSubmit = (event) => {
    event.preventDefault(); // 페이지 새로고침 방지
    alert(`안녕하세요, ${username}님!`); // 사용자에게 메시지 표시
    console.log('제출된 사용자 이름:', username); // 콘솔에 출력
    setUsername(''); // 폼 제출 후 입력 필드 초기화
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>사용자 정보 입력</h1>
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '300px' }}>
        <label htmlFor='usernameInput'>이름:</label>
        <input
          type='text'
          id='usernameInput'
          value={username}
          onChange={handleUsernameChange}
          placeholder='이름을 입력하세요'
          style={{ padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
        />
        <button type='submit' style={{ padding: '10px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          제출
        </button>
      </form>
    </div>
  );
}

코드 해설

1. 'use client';: Next.js 13부터는 app 디렉토리에서 useState와 같은 React 훅을 사용하려면 파일 상단에 'use client';를 명시하여 클라이언트 컴포넌트임을 알려야 합니다.
2. useState(''): username이라는 상태 변수를 선언하고 초기값을 빈 문자열로 설정합니다. 이 변수가 입력 필드의 현재 값을 저장합니다.
3. handleUsernameChange 함수: <input> 요소의 onChange 이벤트에 연결됩니다. 사용자가 입력 필드에 글자를 입력할 때마다 이 함수가 호출되어 event.target.value (현재 입력 필드의 값)로 username 상태를 업데이트합니다.
4. handleSubmit 함수: <form> 요소의 onSubmit 이벤트에 연결됩니다. 폼이 제출될 때 호출되며, event.preventDefault()를 통해 브라우저의 기본 동작(페이지 새로고침)을 막습니다. 이후 username 상태에 저장된 값을 사용하여 알림을 띄우고 콘솔에 출력합니다. 마지막으로 setUsername('')을 호출하여 입력 필드를 초기화합니다.
5. value={username}: <input> 요소의 value 속성을 username 상태에 바인딩합니다. 이는 입력 필드의 값이 항상 username 상태와 동기화되도록 합니다.

단계 3: 애플리케이션 실행

npm run dev

브라우저에서 http://localhost:3000으로 접속하여 폼이 정상적으로 동작하는지 확인합니다. 이름을 입력하고 제출 버튼을 눌러보세요. 알림창이 뜨고, 개발자 도구의 콘솔에 입력된 이름이 출력되는 것을 확인할 수 있습니다.

⚠️ 자주 틀리는 것 / 주의사항

🔗 다음 회차 예고

이번 회차에서는 기본적인 폼 처리와 단일 입력 필드 관리를 학습했습니다. 다음 16회차에서는 ‘여러 입력 필드를 가진 폼 처리’를 주제로, 여러 개의 폼 입력 필드를 효율적으로 관리하는 방법과, 복잡한 폼 데이터를 다루는 패턴에 대해 심화 학습할 예정입니다. 또한, 간단한 폼 유효성 검사(Validation)의 기초도 함께 다루어보겠습니다.