React에서 사용자 입력 처리하기

- 세부목표 -
- 한 줄 입력 처리하기
- 여러 줄 입력 처리하기
- 선택박스 입력 처리하기
- 사용자 입력 데이터 핸들링 하기

import { useState } from "react";

const DiaryEditor = () => {

// 같은 기능을 가진 인풋들은 state객체로 합치기
const [state, setState] = useState({
	author: "",
	content: "",
	emotion: 1,
});

// author, content, emotion Input 변경시 발생하는 함수
const handleChangeState = (e) => {
	console.log(e.target.name);
	console.log(e.target.value);
	setState({
		...state,
		[e.target.name]: e.target.value,
        
		// 객체안에서 key를 작성하는 []배열의 비구조화 할당
		// 즉, [e.target.name] 이라는 key는 전달받은 name이 author면 author의 인풋값을 받아 업데이트.
	})
	console.log(e.target.name)
};

const handleSubmit = () => {
	console.log(state)
	alert('저장 완료!')
}

return (
	<div className="DiaryEditor">
		<h2>게시판</h2>
		<div>
			<input
				name="author"
				value={state.author}
				onChange={handleChangeState}
			/>
		</div>

		<div>
			<textarea
				name="content"
				value={state.content}
				onChange={handleChangeState}
			/>
		</div>

		<div>
			<select
				name="emotion"
				value={state.emotion}
				onChange={handleChangeState} // 옵션 선택시 onChange발동
			>
				<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;