TIL - input과 구조분해할당

// const [userId, setUserId] = useState("");
// const [userPw, setUserPw] = useState("");

const [inputs, setInputs] = useState({
    userId: "",
    userPw: "",
  });

// inputs.userId, inputs.userPw
const { userId, userPw } = inputs;

// event.target.name, event.target.value
const { name, value } = event.target

prevInputs를 가져오는 이유는 setState를 하기 전 inputs의 초기/이전 상태의 key와 value를 가져온다.

// 객체를 수정할 때, inputs[name] = value (X)
setInputs(prevInputs => {
  ...prevInputs,
  [name] : value,
});