[Kossie Coder] 폼 입력 안 했을 시 에러문구 표시

// MovieForm.js

import React, { useState } from 'react';

const MovieForm = ({ addMovie }) => {
  const [movieTitle, setMovieTitle] = useState('');
  const [movieYear, setMovieYear] = useState('');
  🌟const [titleError, setTitleError] = useState(''); // 기본 빈 문자열
  const [yearError, setYearError] = useState('');🌟

  const resetForm = () => {
    setMovieTitle('');
    setMovieYear('');
  };

  🌟const validateForm = () => {
    resetErrors();
    let validated = true; // 기본 상태 - true
    if (!movieTitle) { // 영화제목이 빈칸이면 false
      setTitleError('영화 제목을 넣어주세요');
      validated = false;
    }
    if (!movieYear) { // 개봉연도가 빈칸이면 false
      setYearError('개봉연도를 넣어주세요');
      validated = false;
    }
    return validated;
  };🌟

  🌟const resetErrors = () => {
    setTitleError('');
    setYearError('');
  };🌟

  const onSubmit = (event) => {
    event.preventDefault();
    🌟if (validateForm()) { // 영화추가 버튼 클릭 시 validateForm 함수 실행
      addMovie({         // 리턴값이 true면(모두 입력했다면) 영화 추가
        id: Date.now(),
        title: movieTitle,
        year: movieYear,
      });
      resetErrors();
      resetForm();
    }🌟
  };

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        value={movieTitle}
        placeholder="영화제목"
        onChange={(e) => setMovieTitle(e.target.value)}
      />
      <br />
      🌟<div style={{ color: 'red' }}>{titleError}</div> // 기본이 빈 문자열🌟
      <input                                         🌟// 입력 안 한 게 있다면 보임🌟
        type="number"
        value={movieYear}
        placeholder="개봉연도"
        onChange={(e) => setMovieYear(e.target.value)}
      />
      <br />
      🌟<div style={{ color: 'red' }}>{yearError}</div> // 기본이 빈 문자열🌟
      <button type="submit">영화추가</button>         🌟// 입력 안 한 게 있다면 보임🌟
    </form>
  );
};

export default MovieForm;

 

 

 

 

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */