React, loginForm state하나로 input두개 제어하기

아래의 코드에 쓰인 destructuring, Computed Properties를 점차적으로 알아 보겠다.

import React, { useState } from 'react';

const Login = () => {
  const [inputValues, setInputValues] = useState({
    email: '',
    password: '',
  });

  const handleInput = event => {
    const { name, value } = event.target;
    setInputValues({ ...inputValues, [name]: value });
  };

  return (
    <div>
      <input name="email" type="text" onChange={handleInput} />
      <input name="password" type="password" onChange={handleInput} />
    </div>
  );
};

export default Login;
 

destructuring

 // 우선 함수를 한번 호출해서 할당해줘야 한다
const value = useState('')

console.log(value)
//( '', f()) 호출시 받은 인자값이 0번인덱스, 1번인덱스로는 0번인자값을 바꿔주는 함수가 담겨있다.
const inValue = Value[0]  // 각 각 변수를 선언해서 할당해준다
const setInvalue = Value[1]


// 위 방법을 한번에 구조 분해 할당 시 아래 한줄이 된다.
const [inValue, setInValue] = useState('')

Computed Properties(계산된 프로퍼티)

객체의 프로퍼티 키 값을 변수로 넣을 수 있다.

  const handleInput = event => {
    const { name, value } = event.target;
    setInputValues({ ...inputValues, [name]: value });
  };
   // name = 변수이다.

이제 맨 위의 코드를 내 방식대로 접근해서 풀이해 보았다

//우선 destructuring을 하지 않고  인자 두개를 넣어보았다. 
const value = useState('one', 'two')

console.log(value)  
//  ['one' f()]  결과로는 두번째 인자는 쳐다도 안보고 버려진다. 
// useState는 하나의 인자만 받는다.

//그래서 다시 이번에는 객체로 인자를 주었다.
const value = useState({one: 'one', two: 'two'})

console.log(value) // 잘 담겼다. [{one: 'one', two: 'two'}, f()]

//허나 함수는 한 개 만 나왔다, 
// 여기서 보면 알 수 있는 점은 인자로 받은 값을 부분만 바꿔주려면
// 저 함수에 호출 할때 , 기존의 값을 적어주고 바꿀 부분을 써야된다.

//예를 들어 one은 유지하고 two만 바꾸면 아래처럼....
value[1]( {one: 'one' two: '이게뭐야,,,'})

// 자 이제 destructuring 하고 함수를 접근할 때를 생각 해 보았다.

const [value, setValue] = useState({one: 'one', two: 'two'})

//value = {one: 'one', two: 'two'},  setValue = f(value를 바꾸는 함수)
// 여기서  알고 가야할 점.
//setValue를 사용시 value에 담긴 객체를 유지 시키기는 것까지 신경써서 해야한다.

위 내용을 다 이해하고 다시 문제를 보고 다음으로 넘어가서

const Login = () => {
  const [inputValues, setInputValues] = useState({
    email: '',
    password: '',
  });

  const handleInput = event => {
    const { name, value } = event.target; //input의 name,value property ket로 바로 할당
    setInputValues({ ...inputValues, [name]: value });
  };

<div>
      <input name="email" type="text" onChange={handleInput} value={inputValues.email} />
      <input name="password" type="password" onChange={handleInput} value={inputValues.password} />
    </div>
  );

풀이

 const handleInput = event => {
    const { name, value } = event.target;

evnt.target의 'event.target.name', 'event.target.value' 이렇게 접근해서 나오는 값 두개를
객체 destructuring을 적용하여, { name, value } 로 할당 하였고,

위 같이 destructuring이 되는 이유로는 input태그에는 name, value라는 property가 있기 때문이다.
===> input의 정보가 담긴 객체 안에 '.name', '.value'로 접근이 가능한 property가 있다.

setInputValues({ ...inputValues, [name]: value }); 

이 부분은 [name]이라는 변수로 키값을 표현했는데 이 부분은 Computed Properties 표현 법이다.
[name]이라는 변수의 값에 따라 email이나,password가 key가 되고 key의 value로는 value의 변수 값을 넣어준다.
그리고 '...inputValues'의 spread연산자는 inpustValues 값들을 먼저 뿌려주고, 뒤에 [name]에 해당되는 key값을 덮어서 할당한다.

객체는 property의 key값에 접근하여 찾기 때문에 순서가 없고, 뒤에 중북된 키값을 할당하면
앞에 key값을 덮어 없어진다.

핵심 키워드

1. 객체는 순서가 없다 property의 key로 value를 찾는다.
   그리고 아래처럼 key값을 중복해서 할당하게 되면 앞에 있는값은 뒤에 있는 값에 덮여 쓰여진다.

    
const obj = { one: 'hi', two: 'bye', one: 'hello'}


console.log(obj) // ==> {one: 'hello', two: 'bye'}

2. 객체의 property의 key값을 접근하는 destructuring(구조 분해 할당).
3. Computed Properties(계산된 프로퍼티) => 이는 객체의 키값을 변수로 지정하여 접근하는 vlaue값을 유연하게 바꿀 수 있다.

부족한 설명도 있었지만, 위의 키워드를 재대로 이해하고 보면 눈에 들어올 것입니다.!

모두 건강한 코딩하세요~