[ React ] handleChange 깔끔하게 작성하기

useState를 상용하여 상태를 관리할 때에, JS코드와 JSX코드를 보다 간단하고 효율적이게 사용할 수 있는 로직이다.

JSX에서 input 태그의 onChange props에 바로 setNewEvnet를 작성하지 않고, 함수를 할당하는 방식으로 따로 빼준다음 아래와 같이 함수를 작성해놓으면, 보다 간결한 코드로 로직을 구현해낼 수 있다. 이 방법이 가장 효율적이어보여서 남긴다.

 const [newEvent, setNewEvent] = useState({
   title: "",
   start: "",
   end: "",
   color: "",
   locale: "",
 });

 function handleChange(event) {
   setNewEvent({ ...newEvent, [event.target.name]: event.target.value });
 }


.
.
.


// 이하 JSX (참고로 TextField태그는 MUI에서 사용하는 것으로 InputText와 같은 역할을 한다)
<TextField
           fullWidth
           id='outlined-basic'
           label='Title'
           variant='outlined'
           name='title'
           onChange={handleChange}
           sx={{ mt: 1 }}
         />

 <FormControl fullWidth sx={{ mt: 1 }}>
           <InputLabel id='demo-multiple-name-label'>Category</InputLabel>
           <Select
             labelId='demo-simple-select-label'
             id='demo-simple-select'
             // input={<OutlinedInput label='category' />} ? 넌 뭐냐그럼
             value={newEvent.color}
             label='Category'
             name='color'
             onChange={handleChange}
           >
             <MenuItem value={"#9DC08B"}>개인</MenuItem>
             <MenuItem value={"#40513B"}>직장</MenuItem>
             <MenuItem value={"#609966"}>가족</MenuItem>
             <MenuItem value={"#719192"}>생일 및 기념일</MenuItem>
           </Select>
         </FormControl>
<TextField
             id='outlined-basic'
             label='Locale'
             variant='outlined'
             name='locale'
             onChange={handleChange}
           />