React에서 입력 컴포넌트 생성과 부모 컴포넌트에서 폼 작성

by

이번 포스팅에서는 React와 TypeScript를 활용하여 이메일 입력 컴포넌트를 작성하고, 부모 컴포넌트의 폼에서 사용하는 방법을 살펴보겠습니다.


1. 이메일 입력 컴포넌트 작성

이메일 입력 컴포넌트는 EmailInput으로 정의됩니다. value와 onChange라는 두 가지 props를 받습니다. value는 입력된 이메일 값을 나타내며, onChange는 입력값이 변경될 때 호출됩니다. 이 컴포넌트는 입력값의 유효성을 검사하여 유효하지 않은 경우 경고 메시지를 표시합니다.

import React, { useState, useEffect } from 'react';

interface EmailInputProps {
  value: string;
  onChange: (newValue: string) => void;
}

function EmailInput(props: EmailInputProps) {
  const { value, onChange } = props;
  const [isValid, setIsValid] = useState(true);

  useEffect(() => {
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    setIsValid(emailRegex.test(value));
  }, [value]);

  return (
    <div>
      <label htmlFor="email">이메일:</label>
      <input
        type="email"
        id="email"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={!isValid ? 'invalid' : ''}
      />
      {!isValid && <p className="error">유효한 이메일을 입력하세요.</p>}
    </div>
  );
}


2. 부모 컴포넌트에서 폼 작성

ParentComponent는 부모 컴포넌트입니다. 여기에서는 EmailInput 컴포넌트를 사용하고, 제출 버튼을 클릭하면 이메일 값을 표시합니다. useState를 사용하여 email 및 submittedEmail 상태를 관리하고, handleSubmit 함수를 사용하여 폼 제출을 처리합니다.

function ParentComponent() {
  const [email, setEmail] = useState('');
  const [submittedEmail, setSubmittedEmail] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmittedEmail(email);
  };

  return (
    <div>
      <h1>이메일 입력 예제</h1>
      <form onSubmit={handleSubmit}>
        <EmailInput value={email} onChange={setEmail} />
        <button type="submit">제출</button>
      </form>
      {submittedEmail && <p>제출된 이메일: {submittedEmail}</p>}
    </div>
  );
}


3. 결과 확인

이제 부모 컴포넌트와 이메일 입력 컴포넌트가 함께 동작합니다. 사용자는 이메일을 입력하고 제출 버튼을 클릭하면 입력한 이메일이 표시됩니다. 유효하지 않은 이메일을 입력한 경우 경고 메시지가 나타납니다.

이를 통해 React와 TypeScript를 사용하여 이메일 입력 컴포넌트와 폼을 구축하는 방법을 살펴보았습니다. 이러한 방식으로 사용자 입력을 다루는 더 복잡한 컴포넌트를 구현할 수 있습니다.



Leave a Comment