[React] 구조분해할당

import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import ASIDE_1ST from "./ASIDE_1ST";
import ASIDE_2ND from "./ASIDE_2ND";
import "./SignUp.scss";

function SignUp() {
  const [alert, setAlert] = useState(false);
  const navigate = useNavigate();

  const [userInfo, setUserInfo] = useState({
    last_name: "",
    first_name: "",
    birthday: "",
    phone_number: "",
    email: "",
    password: "",
  });
  // 각각에 name을 정해주고
  const userInfoHander = e => {
    const { name, value } = e.target;
    // e.target.name , e.target.value
    setUserInfo({ ...userInfo, [name]: value });
    // [name]은 각각에 input에 있는 name 값을 의미하고 value 는 각각의 e.target.value를 의미함
  };
  const { last_name, first_name} = userInfo;
  // setUserInfo에 ...스프레드연산자(전개연산자)를 사용하여 userInfo의 값을 풀어 넣어주고 각각의 name에 value을 줌

  const isLastNameValid = last_name.length > 0;
  const isFirstNameValid = first_name.length > 0;
 
  return (
      <div className="right-container">
        <div className="right-main-container">
          <form className="right-mid-container" onChange={userInfoHander}>
            <div className="right-1st-set">
              <div className="right-1st-text">성</div>
              <input
                name="last_name" 
                type="text"
                className={`right-1st-input ${
                  last_name.length === 0 || isLastNameValid
                    ? "valid-input"
                    : "invalid-input"
                } `}
              />
              {isLastNameValid || (
                <div className="right-valid-text">성을 입력해주세요.</div>
              )}
            </div>
            <div className="right-2nd-set">
              <div className="right-2nd-text">이름</div>
              <input
                type="text"
                name="first_name" 
                className={`right-2nd-input ${
                  first_name.length === 0 || isFirstNameValid
                    ? "valid-input"
                    : "invalid-input"
                } `}
              />
              {isFirstNameValid || (
                <div className="right-valid-text">이름을 입력해주세요.</div>
              )}
            </div>
            <div className="right-3rd-set">
              <div className="right-3rd-text-emotion">
                <div className="right-3rd-text1">생일</div>
                {alert && (
                  <div className="rigth-text-hover">
                    만 14세 이상만 가입할 수 있습니다
                  </div>
                )}
                <div
                  className="right-text-hover-img"
                  onMouseEnter={() => setAlert(true)}
                  onMouseLeave={() => setAlert(false)}
                >
                  <img src="https://img.icons8.com/ios/344/info--v3.png" />
                </div>
              </div>
          </form> 
          </div>
        </div>
      </div>
    </div>
  );
}

export default SignUp;

const [lastName, setLastName] = useState("")
const [firstName, setFirstName] = useState("")
const [birthday, setBirthday] = useState("")
const [phoneNumber, setPhoneNumber] = useState("")
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")

const userLastName = e => {setLastName(e.target.value)}
const userFirstName = e => {setFirstName (e.target.value)}
const userBirthday = e = > {setBirthday (e.target.value)}
const userPhoneNumber = e => {setPhoneNumber (e.target.value)}
const userEmail = e => {setEmail (e.target.value)}
const userPassword = e => {setPassword (e.target.value)}


				▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ 


const [userInfo, setUserInfo] = useState({
    lastName: "",
    firstName: "",
    birthday: "",
    phoneNumber: "",
    email: "",
    password: "",
  });
const userInfoHander = e => {
    const { name, value } = e.target; 
    setUserInfo({ ...userInfo, [name]: value }); 
  };

로그인과 회원가입을 하면서 구조분해할당을 사용하지 않고 로직을 짤때는 여러개에 State을 사용하였는데 구조분해할당을 사용하여 한개의 State 안에 반복되는 코드를 객체안에 넣어 사용하였습니다.  이런식으로 반복되는 코드를 하나의 State로 사용하면 관리하기가 좋고 코드가 길어지는거 방지할 수 있다.