state를 다루는 것이 비슷하다면 여러개 선언하는 것이 아닌 다음과 같이 한개의 state에 선언해준다.
const [state, setState] = useState({
author: "",
content: "",
emotion: 1,
});
handle 함수를 두고 target의 이름을 가져와서 해당 target만 변경하도록 진행한다.
const handleChangeState = (e) => {
setState({
...state,
[e.target.name]: e.target.value,
});
};
<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}
>
<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>