[REACT]구조분해 할당 예시

구조분해전:

const Login = () => {

const [email,setEmail]=useState('')
const [pw,setPw]=useState('')

const saveUserEmail = e =>{
e.preventDefault();
  setEmail(e.target.value)
}

const saveUserPw = e =>{
e.preventDefault();
  setEmail(e.target.value)
}
return(
        <form>
          <input
            name="email"
            onChange={saveUserEmail}
          />
          <input
            name="password"
            onChange={saveUserPw}
          />
          <button>
             로그인
          </button>
</form>)

구조분해후:

const Login = () => {
  const [userInfo, setUserInfo] = useState({         // 1번
    email: '',
    password: '',
  });
  const saveUserInfo = event => {                    //2번
    const { name, value } = event.target;
    setUserInfo({ ...userInfo, [name]: value });
  };
  return(
  	    <form>
          <input
            name="email"
            onChange={saveUserInfo}
          />
          <input
            name="password"
            onChange={saveUserInfo}
          />
          <button>로그인</button>
        </form>)

---

1번. input의 값을 state하나로 가져오기

input 의 값은 어차피 한번에 한번에 한곳의 값만 바꿀수 있기 때문에 하나의 state로 묶어서 사용할 수 있다.

• input태그의 name속성으로 태그를 구분:
  ▪️ name은 input 태그만 가지고 있는 속성으로 태그를 구분할 때 id나 className대신 자주 사용된다.

• useState의 초기값을 객체로 설정
  ▪️ 이메일과 비밀번호의 input을 구분하기 위해 객체의 key값을 input태그의 name속성 값으로 지정.
  

2번. 객체의 구조분해

event 객체의 구조분해를 통해 필요한 속성을 key값으로 가져와 사용할 수 있다.

event.target.value , event.target.name
-> {name,value} = event.target
name 과 value를 분리하여 변수에 값을 할당할 수 있음.

스프레드 연산자를 통해 객체의 형태가 유지된 상태로 key:value값만 업데이트.