[React] useState를 통한 입력내용 처리

이미 구현한 코드로, 코드+분석 정도만 작성할 예정 ~
해당 코드는 아래의 강의를 참고하였습니다👀
한입 크기로 잘라 먹는 리액트

✏️구현 코드

• 입력되는 값: author, content, emotion
• useState를 이용하여 값이 입력됨에 따라 바뀜을 구현

DiaryEditor.jsx

import { useState } from "react";

const DiaryEditor = () => {
  	// 여러개의 input 상태 관리
    const [state, setState] = useState({
        author: "",
        content: "",
        emotion: 1
    })

    // 입력된 값이 바뀔 때마다 해당 value가 바뀜
    const handleChangeStaete = (e) => {
        setState({
            ...state, //기존의 state 객체를 복사
            [e.target.name]: e.target.value //name키를 가진 값을 value로 설정
        })
    }

    const handleSubmit = () => {
        console.log(state);
        alert("저장 성공")
    }

    return (
        <div className="DiaryEditor">
            <h2>오늘의 일기장</h2>
            <div>
                <input
                    name="author"
                    value={state.author}
                    onChange={handleChangeStaete}
                />
            </div>
            <div>
                <textarea
                    name="content"
                    value={state.content}
                    onChange={handleChangeStaete}
                />
            </div>
            <div>
                <span>오늘의 감정점수: </span>
              	// 감정점수는 우선 임의로 넣어둠
                <select
                    name="emotion"
                    value={state.emotion}
                    onChange={handleChangeStaete}
                >
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                    <option value={4}>4</option>
                    <option value={5}>5</option>
                </select>
            </div>
            <div>
                <button onClick={handleSubmit}>일기 저장하기</button>
            </div>
        </div>
    );
};

export default DiaryEditor;