React 이벤트 핸들링 - 연습문제

문제: 간단한 "이름과 이메일 입력 폼" 만들기

---

목표:

1. 사용자가 이름과 이메일을 입력할 수 있는 폼을 만든다.
2. 버튼을 클릭하면 입력한 값을 화면에 표시한다.
3. 폼 제출 시, 기본 동작을 막고, 입력된 데이터를 화면에 출력한다.

---

기능 요구 사항:

• 이름과 이메일을 입력할 수 있는 필드가 있다.
• 제출 버튼을 클릭하면 입력된 이름과 이메일이 아래에 출력된다.
• 이름과 이메일을 입력하지 않으면, 오류 메시지를 출력한다.
• 폼을 제출할 때 페이지 새로고침을 막아야 한다.

---

구현 단계:

1. name과 email을 입력할 수 있는 두 개의 텍스트 필드를 만든다.
2. onChange 이벤트로 사용자가 입력한 값을 상태에 저장한다.
3. onSubmit 이벤트로 폼 제출을 처리하고, 제출 버튼을 클릭하면 입력값을 출력한다.
4. 입력값이 비어 있으면 오류 메시지를 출력한다.

힌트:

• 상태 관리: useState를 사용해 각각의 입력값(name, email)을 관리하자.
• 폼 제출 시 새로고침을 방지하려면 event.preventDefault()를 사용해야 한다.

출력 예시:

이름: Alice 이메일: alice@example.com

 

예제 코드 구조 :

import React, { useState } from 'react';

function FormExample() {
  // 상태 선언
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  // 폼 제출 핸들러
  const handleSubmit = (event) => {
    event.preventDefault();  // 페이지 새로고침 방지

    if (!name || !email) {
      setError('이름과 이메일을 모두 입력해주세요!');
      return;
    }

    setError('');
    // 제출한 데이터 출력
    alert(`이름: ${name}\n이메일: ${email}`);
  };

  // 입력 값 핸들러
  const handleNameChange = (event) => setName(event.target.value);
  const handleEmailChange = (event) => setEmail(event.target.value);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            이름:
            <input type="text" value={name} onChange={handleNameChange} />
          </label>
        </div>
        <div>
          <label>
            이메일:
            <input type="email" value={email} onChange={handleEmailChange} />
          </label>
        </div>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        <button type="submit">제출</button>
      </form>
    </div>
  );
}

export default FormExample;

 

🔥 실습

1️⃣ 폼 초기화 기능 추가

• 이름과 이메일 입력값을 모두 초기화하는 버튼을 추가하라.
• 오류 메시지도 초기화되어야 한다.

2️⃣ 이메일 형식 검사 기능 추가

• 이메일 입력 값이 올바른 형식인지 검사하는 로직을 추가하라.
• 이메일이 잘못된 형식이면 오류 메시지를 출력하라.
  • 예) "올바른 이메일 형식을 입력하세요!"
• 이메일 형식은 @와 .가 포함된 기본적인 형태여야 한다.
• 이메일 형식이 올바르면 오류 메시지를 지운다.

🔥 정답

 

import React, { useState } from 'react';

function FormExample() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

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

    if (!name || !email) {
      setError('이름과 이메일을 모두 입력해주세요!');
      return;
    }

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      setError('올바른 이메일 형식을 입력하세요!');
      return;
    }

    setError('');
    alert(`성공적으로 제출! 이름: ${name}, 이메일: ${email}`);
  };

  const handleClearData = () => {
    setName('');
    setEmail('');
    setError('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            이름:
            <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
          </label>
        </div>
        <div>
          <label>
            이메일:
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
          </label>
        </div>
        <div>
          <button type="button" onClick={handleClearData}>초기화</button>
        </div>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        <button type="submit">제출</button>
      </form>
    </div>
  );
}

export default FormExample;