아래의 코드에 쓰인 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값을 덮어 없어진다.
핵심 키워드
const obj = { one: 'hi', two: 'bye', one: 'hello'}
console.log(obj) // ==> {one: 'hello', two: 'bye'}
부족한 설명도 있었지만, 위의 키워드를 재대로 이해하고 보면 눈에 들어올 것입니다.!
모두 건강한 코딩하세요~