React State Handling

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>