[Kossie Coder] InputField 컴포넌트로 빼내기

// MovieForm.js

import React, { useState } from 'react';
import InputField from './InputField';

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;
    if (!movieTitle) {
      setTitleError('영화 제목을 넣어주세요');
      validated = false;
    }
    if (!movieYear) {
      setYearError('개봉연도를 넣어주세요');
      validated = false;
    }
    return validated;
  };

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

  const onSubmit = (event) => {
    event.preventDefault();
    if (validateForm()) {
      addMovie({
        id: Date.now(),
        title: movieTitle,
        year: movieYear,
      });
      resetErrors();
      resetForm();
    }
  };

  return (
    <form onSubmit={onSubmit}>
      🌟<InputField
        type="text"
        value={movieTitle}
        placeholder="영화제목"
        onChange={(e) => setMovieTitle(e.target.value)}
        errorMessage={titleError}
      />
      <InputField
        type="number"
        value={movieYear}
        placeholder="개봉연도"
        onChange={(e) => setMovieYear(e.target.value)}
        errorMessage={yearError}
      />🌟
      <button type="submit">영화추가</button>
    </form>
  );
};

export default MovieForm;

// InputField.js

import React from 'react';

const InputField = ({ type, value, placeholder, onChange, errorMessage }) => {
  return (
    <>
      <input
        type={type}
        value={value}
        placeholder={placeholder}
        onChange={onChange}
      />
      <br />
      <div style={{ color: 'red' }}>{errorMessage}</div>
    </>
  );
};

export default InputField;

코드 줄 수 차이는 별로 없지만 컴포넌트로 사용하면 스타일을 적용한다던가 할 때 한 곳에서만 수정하면 되므로 편리하다. ⇒ 재사용성이 좋다.