단축속성명, 계산된속성명, 비구조화할당_React

ES6이후에 추가된 기능

• 단축속성명 (shorthand property names)
• 계산된속성명 (computed property names)
• 비구조화할당 (destructuring)

단축속성명 (shorthand property names)

• 단축 속성명을 이용한 객체생성
• 객체의 속성값일부가 이미 변수로 존재하면 간단하게 변수이름만 적어도 됨

const name = 'mike';
const obj = {
    age : 21,
    name,    // 단축속성명
    getName() {return this.name}
}

• 콘솔로그 출력시 단축속성명 활용

const name = 'mike';
const age = 21;
console.log({name,age})
// result
{name : 'mike', age:21}

계산된속성명 (computed property names)

• 계산된 속성명을 사용하지 않은 경우와 그렇지 않은 경우

// 계산된 속성명 미사용, 기존코드
function makeObject1(key,value) {
    const obj = {};
    obj[key] = value;
    return obj
}
// 계산된 속성명 사용
function makeObject2(key,value) {
    return {[key]:value}        // 계산된 속성명 [key]
  //[key]값이 key의 이름으로 동적으로 할당됨
}

//ex id와 pw 값
//여러개의 state 관리
const [inputs, setInputs] = useState({
idValue: '',
pwValue: '',
});

const { idValue, pwValue } = inputs;

const handleInput = e => {
const { value, name } = e.target;
setInputs({
...inputs,

  [name]: value,
});

};

const buttonChange = () => {
setButtonOn(
....
);
};

return(
//name과 value설정 필수



</
)

>### 비구조화할당 (destructuring)
#### 배열 비구조화
- 배열비구조화는 순서를 기준으로 할당됨
객체 비구조화와 다르게 배열 비구조화는 index값이 기준이됨
```js
const arr = [1,2];
const [a,b] = arr;
console.log(a)    // 1
console.log(b)    // 2

• 배열 비구조화의 기본값

const arr = [1];        // arr[0]=1
const [a=10, b=20] = arr;
console.log(a)    //    1
console.log(b)    //    20

두번째 줄에서 a=10, b=20 으로 기본값이 할당되어 있다.
여기에 첫 번재 요소에 1, 두 번째 요소에 undefined가 덮어 씌워진다.
undefined의 경우에는 원래 값을 변경하지 않는다.
결과는 a=1, b=20 이다

• 배열 비구조화 값 교환

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a)    // 2
console.log(b)    // 1

제3의 변수가 필요하지 않고, 한 줄의 코드로 작성할 수 있다.

• 일부 속성값 건너뛰기

const arr = [1,2,3];
const [a,,c] = arr;
console.log(a)    // 1
console.log(c)    // 3

객체 비구조화

• 객체 비구조화

const obj = {age: 21, name:'mike'}
const {age,name} = obj;
console.log(age);    // 21
console.log(name);    // mike

obj객체에서 key값과 일치하는 변수명에 value를 할당해준다.
순서는 무관하며, 존재하지 않는 속성명은 undefined가 할당된다.

• 객체 비구조화 별칭사용

const obj = {age:21, name:'mike'}
const {age:theAge, name} = obj;
console.log(theAge);    // 21
console.log(age)      // 참조에러

theAge는 21이 출력되지만, age는 참조에러가 발생한다.

• 기본값 사용하기(undefined와 null의 차이)

const obj = {age:undefined, name: null, grade:'A'};
const {age = 0, name='noName', grade='F'} = obj;
console.log(age);    // 0
console.log(name);  // null
console.log(grade); // A

name은 null이 된다. 기본값을 사용하려면 undefined로 설정해야한다.

• 기본값과 별칭 함께 사용

const obj = {age:undefined, name:'mike'}
const {age:theAge = 0, name } = obj
console.log(theAge)    // 0

• 함수를 이용한 기본값

function getDefaultAge () {
    console.log('hello')
    return 0
}
const obj = {age:21,grade:'A'}
const {age = getDefaultAge(), grade} = obj;// hello 출력되지 않음
console.log(age)    // 21

기본값이 사용될 때만 함수가 호출된다.
obj객체의 age의 value가 undefined가 아니므로 함수가 호출되지 않는다.
기본값을 설정하는 함수로 구성하면 유용할 것 같다.