[React] 여러 상태를 한번에 관리하기

여러 인풋의 상태를 한번에 관리하기

1. useState를 객체로 작성한다.

const DiaryEditor = () => {
    const [state, setState] = useState({
        author: '',
        content: '',
        emotion: 1,
    });

2. 인풋요소들의 name을 객체들의 키 값과 동일하게 작성한다.

<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}>
</div>

3. onChange 이벤트를 변경 사항만 적용되게 작성한다

  const handleChangeState = (e) => {
        setState({
            ...state, // 기존코드 그대로 가져오기 
            [e.target.name]: e.target.value, 
        });
    };