Colin's Blog
[javascript] Next.js에서의 폼 유효성 검사 처리 방법은 어떤 것이 있나요?

Next.js에서 폼의 유효성을 검사하는 방법은 여러 가지가 있습니다. 여기에서는 두 가지 방법을 소개하겠습니다.

  1. 클라이언트 측 유효성 검사: 이 방법은 Next.js에서 제공하는 자체 유효성 검사 기능을 사용하는 방법입니다.
    1. 폼 구성 요소에 ‘required’와 같은 HTML5 유효성 검사 속성을 추가합니다.
    2. 폼 submit 이벤트를 처리하기 전에 클라이언트 측에서 폼의 유효성을 검사하는 JavaScript 코드를 작성합니다.
    3. 예를 들어, handleSubmit 함수 내에서 폼 유효성 검사를 수행하는 코드를 작성할 수 있습니다.
import { useState } from 'react';

export default function MyForm() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();

    // 폼 유효성 검사 로직
    if (inputValue.trim() === '') {
      alert('입력값이 비어 있습니다.');
      return;
    }

    // 폼을 서버로 제출하는 로직
    // ...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)}
      />
      <button type="submit">전송</button>
    </form>
  );
}
  1. 서버 측 유효성 검사: 이 방법은 서버 측에서 전체 폼 유효성 검사를 수행하는 방법입니다.
    1. Next.js API 라우트를 사용하여 서버 측의 유효성 검사 로직을 구현합니다.
    2. 폼 제출 시 API 라우트로 데이터를 전송하고, 서버에서 유효성을 검사하고 처리합니다.
    3. 만약 유효성 검사에 실패하면 에러 메시지를 반환하고, 성공하면 다음 단계로 이동합니다.
// pages/api/submit-form.js
export default function handleFormSubmit(req, res) {
  const { inputValue } = req.body;

  // 폼 유효성 검사 로직
  if (inputValue.trim() === '') {
    res.status(400).json({ error: '입력값이 비어 있습니다.' });
    return;
  }

  // 폼을 처리하는 로직
  // ...
}

// MyForm 컴포넌트에서 API 라우트로 폼 데이터를 전송하는 부분
// ...
const handleSubmit = async (event) => {
  event.preventDefault();

  try {
    const response = await fetch('/api/submit-form', {
      method: 'POST',
      body: JSON.stringify({ inputValue }),
      headers: { 'Content-Type': 'application/json' },
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.error);
    }

    // 성공적으로 처리된 경우 다음 단계로 이동
  } catch (error) {
    alert(error.message);
  }
};
// ...

위의 방법 중에서 선택하여 폼 유효성 검사를 처리할 수 있습니다. 필요에 따라 클라이언트 측, 서버 측 또는 양측 모두를 사용할 수도 있습니다. 이러한 방법을 활용하여 안전하고 유효한 데이터를 수집하고 처리할 수 있습니다.

참고 문서:

© 2018 Colin. All rights reserved.