useState

🧸 state를 객체 형태로 관리해주기

import {useState} from 'react'

const [values, setValues] = useState({
  title: '',
  content: '',
  image: '',
  brand: '오리온',
  flavor: '딸기',
  type: '콘'
});

✔️ state 로 관리해주려고 했던 값들을 객체 형태 [ key - value ] 로 묶어서 관리.

🧸 input 요소에 name & value 값 지정해주기

<input type="text" name="title" value={values.title} onChange={onChangeHandler} />

✔️ name - state의 key 값
✔️ value - state.key

🧸 name & value 값 이용하여 Handler 함수 생성

const onChangeHandler = (event) => {
  const { name, value } = event.target;
  setValues((prev) => {
  ...prev,
  [name]: value
  });
};

✔️ name & value 를 각각 구조분해할당을 이용해 변수로 받기.
✔️ setState 함수를 사용하여, 객체 내의 name이라는 key를 가진 value를 input 의 value 값으로 변경.

📌 !important.
여러 Input을 각각의 state로 관리하게 되면, 이후 가독성 저하로 인해 유지 보수하기 힘들어진다.