1. 구조 분해 할당
- 배열이나 객체의 속성을 분리하여 그 값을 변수에 담을 수 있다!
let [x, y] = [1, 2];
console.log(x); // 1
console.log(y); // 2
- 배열이 먼저 나와서 선언되고 거기에 이미 선언된 객체가 할당됨.
- 해당하는 값을 넘으면? : 당근 undefined 그러나 기본값을 설정하여 막을 수 있다.
let [a, b, c,] = [1, 2];
// 원래는 c는 undefined가 되어야 하지만,
let [a=3, b=4, c=5] = [1, 2];
//이제는 c가 있어서 그대로 5가 나온다.
- 공백으로 일부 반환 값을 무시할 수 도 있다.
let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];
// index 1 의 Tom 은 사라지고 user2는 Jane가 된다.
let a = 1;
let b = 2;
// a에 바로 b를 넣어 버리면 a가 사라진다
let c= a;
// 그래서 c 를 만들어서 a를 넣어둔다.
[a, b] = [b, a];
// 구조 분해 할당으로 간단하게 만들면 이렇게 된다.
let user = {name: 'Mike', age: 30};
let {name, age} = user;
// 물론 키가 있기 때문에 name과 age의 순서가 바뀌어도 상관없다.
// 변수이름 name과 age도 바꿔버려도 된다.
let user = {
name: 'Jane',
age: 18,
gender: 'female',
};
let {name, age, gender = 'male'} = user;
// 배열과 마찬가지로 기본값도 똑같이 사용 가능하다.
// 위의 경우, gender 에 기본값을 무시하고 객체의 값이 이미 있기 때문에 그것을 사용한다.
2. 리액트가 말하고자 하는 것
- 결국 리액트는 유저가 바꾼 데이터를 리액트 프로그램 자체도 인식을 하게 만드는 것을 원한다.
- 그래서 이것이 컴포넌트로 작동할 것이다.
- 최후에는 바뀐 데이터를 리액트가 알고 있으므로, 어느 위치에서든 가져와 쓸 수 있게 된다.