여러개의 state, handler 를 하나의 state, handler로 만들기

import { useState } from "react"
import './ReviewForm.css';

function ReviewForm() {
    // 여러개로 관리하는 state를
    const [title, setTitle] = useState('');
    const [rating, setRating] = useState(0);
    const [content, setContent] = useState('');

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

    const handleRatingChang = (e) => {
	    const nextRating = Number(e.target.value) || 0;
         // 입력값이 숫자
	    setRating(nextRating);
    };

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

    const handleChange = (e) => {
        const { name, value } = e.target;

        setValues((prevValues) => ({
            ...prevValues,
            [name]: value,
            // name의 값으로 프로퍼티명을 지정하고 : 해당하는 값을 지정해줄 수 있음
        }));
    }

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

    return (
        <form className="ReviewForm" onSubmit={handleSubmit}>
            {/* <input value={title} onChange={handleTitleChange}></input>
            <input type="number" value={rating} onChange={handleRatingChang}></input>
            <textarea value={content} onChange={handleContentChange}></textarea> */}
            <input name="title" value={values.title} onChange={handleChange}></input>
            <input type="number" name="rating" value={values.rating} onChange={handleChange}></input>
            <textarea name="content" value={values.content} onChange={handleChange}></textarea>
            <button type="submit">확인</button>
        </form>
    )
}

export default ReviewForm

여러개로 관리하는 state를 하나의 state로 수정

(state도 하나로 줄어들고 handler 함수도 하나로 만들 수 있어서 깔끔한 코드 작성가능)

import { useState } from "react"
import './ReviewForm.css';

function ReviewForm() {
    // 하나의 state로 수정 (state도 하나로 줄어들고 handler 함수도 하나로 만들 수 있어서 깔끔한 코드 작성가능)
    const [values, setValues] = useState({
        title: '',
        rating: 0,
        content: '',
    });

    const handleChange = (e) => {
        const { name, value } = e.target;

        setValues((prevValues) => ({
            ...prevValues,
            [name]: value,
            // name의 값으로 프로퍼티명을 지정하고 : 해당하는 값을 지정해줄 수 있음
        }));
    }

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

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

export default ReviewForm