[React] 하나의 state로 폼 구현하기

function ReviewForm() {
  const [title, setTitle] = useState('');
  const [rating, setRating] = useState(0);
  const [content, setContent] = useState('');

  const handleTitleChange = (e) => {
    setTitle(e.target.value);
  };

  const handleRatingChange = (e) => {
    const nextRating = Number(e.target.value) || 0; 
    setRating(nextRating);
  };

  const handleContentChange = (e) => {
    setContent(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault(); 
    console.log({
      title,
      rating,
      content,
    });
  };

  return (
    <form className='ReviewForm' onSubmit={handleSubmit}>
      <input value={title} onChange={handleTitleChange} />
      <input value={rating} onChange={handleRatingChange} />
      <textarea value={content} onChange={handleContentChange} />
      <button type='submit'>확인</button>
    </form>
  );
}

하나의 입력폼에서 각각의 값을 서로다른 state로 관리하고 있다.

코드의 중복을 줄이고 간결하게 표현하기 위해
다음과 같이 하나의 state로 관리할 수 있다.

function ReviewForm() {
  const [values, setValues] = useState({
    title: '',
    rating: 0,
    content: '',
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(values);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  return (
    <form className='ReviewForm' onSubmit={handleSubmit}>
      <input name='title' value={values.title} onChange={handleChange} />
      <input name='rating' value={values.rating} onChange={handleChange} />
      <textarea name='content' value={values.content} onChange={handleChange} />
      <button type='submit'>확인</button>
    </form>
  );
}

이렇게 작성하면 values state에서 입력값을 한번에 관리할 수 있다.
name 키워드를 사용하는 것이 핵심!