React Hook Form과 Zod를 기존 이메일 기능에 통합

이메일 검증을 위해 React Hook Form과 Zod 통합

프론트엔드: React Hook Form 및 Zod를 사용한 반응

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
const schema = z.object({
  fullName: z.string().min(1, "Full Name is required"),
  senderEmail: z.string().email("Invalid email address"),
  phone: z.string().min(10, "Phone number is too short"),
  message: z.string().min(1, "Message is required"),
});
const ContactForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema)
  });
  const onSubmit = async (data) => {
    const finalHtml = renderToStaticMarkup(
      <ContactFormEmail message={data.message} senderEmail={data.senderEmail} />
    );
    const finalText = renderToStaticMarkup(
      <ContactFormEmail message={data.message} senderEmail={data.senderEmail} />
    );
    try {
      const res = await fetch('/api/sendEmail.json', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          from: 'john@doe.com',
          to: 'john@doe.com',
          subject: 'New message from contact form',
          reply_to: data.senderEmail,
          html: finalHtml,
          text: finalText
        })
      });
    } catch (error) {
      setError('root', { message: error.response.data.message });
    }
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('fullName')} placeholder="Full Name" />
      {errors.fullName && <p>{errors.fullName.message}</p>}
      <input {...register('senderEmail')} placeholder="Email" />
      {errors.senderEmail && <p>{errors.senderEmail.message}</p>}
      <input {...register('phone')} placeholder="Phone" />
      {errors.phone && <p>{errors.phone.message}</p>}
      <textarea {...register('message')} placeholder="Message" />
      {errors.message && <p>{errors.message.message}</p>}
      <button type="submit">Send</button>
    </form>
  );
};
export default ContactForm;

이메일 전송을 위한 백엔드 설정

백엔드: Express가 포함된 Node.js

const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-email@gmail.com',
    pass: 'your-password'
  }
});
app.post('/api/sendEmail.json', (req, res) => {
  const { from, to, subject, reply_to, html, text } = req.body;
  const mailOptions = {
    from, to, subject, replyTo: reply_to, html, text
  };
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return res.status(500).send({ message: error.message });
    }
    res.status(200).send({ message: 'Email sent successfully' });
  });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

React Hook Form과 Zod 통합에 대해 자주 묻는 질문

1. React Hook Form을 Zod와 어떻게 통합하나요?
2. @hookform/resolvers/zod 패키지의 zodResolver 함수를 사용하여 Zod 유효성 검사를 React Hook Form과 연결하세요.
3. renderToStaticMarkup의 목적은 무엇입니까?
4. renderToStaticMarkup은 React 구성 요소를 이메일 콘텐츠나 기타 정적 HTML 요구 사항에 사용할 수 있는 정적 HTML 문자열로 변환합니다.
5. React Hook Form을 사용하여 양식 제출을 어떻게 처리할 수 있나요?
6. React Hook Form의 handleSubmit 기능을 사용하여 양식 제출을 관리하고 데이터를 처리하기 전에 유효성을 검사하세요.
7. nodemailer.createTransport는 무엇을 합니까?
8. nodemailer.createTransport는 지정된 서비스 및 인증 세부정보를 사용하여 이메일을 보내기 위한 전송 객체를 생성합니다.
9. 서버측 유효성 검사가 중요한 이유는 무엇입니까?
10. 서버측 유효성 검사는 서버에서 수신한 데이터가 유효한지 확인하여 데이터 무결성을 유지하고 악의적인 입력으로부터 보호합니다.

양식 검증 및 제출에 대한 최종 생각

React 애플리케이션의 양식 검증을 위해 React Hook Form과 Zod를 통합하면 데이터 무결성과 사용자 경험이 향상됩니다. Node.js 및 Express를 사용하여 클라이언트 측 검증과 서버 측 처리를 결합하면 양식 제출을 처리하기 위한 강력한 솔루션을 만들 수 있습니다. 이 접근 방식을 사용하면 데이터가 적절하게 검증되고 안전하게 처리되어 오류가 줄어들고 안정성이 향상됩니다. 이러한 방법을 구현하면 웹 양식의 기능과 보안이 크게 향상될 수 있습니다.