사용자 입력 처리

📘 일기장

• 상태 변화 이벤트 핸들러 합치기

1. 각각 상태 변화 이벤트 핸들러

      <div>
        <input
            name="author" 
            value={state.author} 
            onChange={(e) => {
                setState({
                    ...state,
                    author: e.target.value,
                });
            }}/>
      </div>
      <div>
        <textarea
            name="content" 
            value={state.content} 
            onChange={(e) => {
                setState({
                    ...state,
                    content: e.target.value,
                });
            }}/> 
       </div>

2. 상태 변화 이벤트 핸들러 합치기

const handleChangeState = (e) => {
        console.log(e.target.name);
        console.log(e.target.value);

        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>
    
    

name을 설정해서 e.target.name으로 구분할 수 있다.