02/16 [React] Spread연산자,구조분해
1. Spread연산자(엄청 많이 사용함)
-- Iterable Object(열거 가능한 오브젝트)를 하나씩 전개하는 연산자로 ...변수명 으로 전개
--배열 전개하기
-객체 전개하기
const obj1={name:'가길동',age:20};
const obj2={
addr:'가산동',
company:{
name:'코스모',
contacts:
{tel:'010-123-4567', mobile:'010-999-9999'}
}
};
-- 함수 호풀 시 배열전달
--문자열에 전개 연산자 적용하기(파이썬과 완전동일)
-전개연산자로 객체 수정(리엑트에서 많이 사용하는 스타일)
: 수정을 원하지 않는 부분은 전개 연산자를 사용하여 표기하고 수정할 부분만 새로운 값으로 지정하면된다
리액트 같은 프론트엔드 라이브러리에서는 위와 같이 수정하면 리렌더링이 일어나지 않아서
수정된 값이 화면에 그려지지 않는다
그래서 아래처럼 수정해서 새로운 객체를 만들어야 한다
(객체의 특징을 이용! 값이 있는데 새로운 객체를 넣으면 객체가 바뀐다 & 키는 중복이 안된다 )
Rest파라미터(나머지 매개변수)
Computed Property Name
문자열 또는 문자열로 변환 가능한 표현식을 사용해 Property Name를 동적으로 생성할 수 있다.
단,Property Name으로 사용할 표현식을 대괄호([…])로 묶어야 한다.
구조분해 할당(Destructuring assignment)
-let ,const 혹은 var ekdma{}가 오면 구조분해 할당을 통해서 선언한 변수에 배열이나 개게의 값을 할당한다는 의미다.
반드시 대괄호로를 넣어 줘야 한다!!
구조분해가 가능한 객체를 할당해야 한다. 구조분해야 가능한 객체는 Iterable Object 이다
구조분해 할당 (변수 선언 후 할당)
기본값 할당도 가능하다
Swapping variables
-배열 구조분해를 사용하여 값을 바꾸는 것이 한 줄로 표현이 가능하다.
let a = 1;
let b = 3;
//왼쪽에 대괄호 표현은 구조분해 할당을 한다. 라는 의미
//오른쪽에 대괄호는 배열, 즉 a,b 변수에 저장된 값으로 두 개의 요소를 갖는 배열을 만듦
[a, b] = [b, a];
Parsing an array returned from a function]
-함수에서 반환된 배열로 구조분해 할당
Ignoring some returned values]
-배열 구조분해로 할당된 값을 무시
******* 함수 정의 시 매개변수에 ...을 붙이면 ...은 스프레드 연산자라고 부르지 않고
그 매개변수를 Rest 파라미터로 역할을 할 수 있게 해준다.
Assigning the rest of an array to a variable]
객체 구조분해
배열과 다른 점은 객체의 속성명(키값)으로 값을 받아야 한다는 점이다
또한 [ ]가 아닌 { }로 감싸야 한다.
Basic assignment]
const obj = { name: 'kosmo', location: '가산동',contacts:'010' };
const {contacts,name,location} = obj;
console.log(contacts,name,location) // 010 kosmo 가산동
console.log(name) // kosmo
Assignment without declaration]
-변수 선언후 리터럴 객체를 구조분해 할당 하려면 반드시 할당문 전체를 괄호로 감싸야 한다.
변수 선언후 리터럴 객체를 구조분해 할당 하려면 반드시 할당문 전체를 괄호로 감싸야 한다.
즉 객체 = 객체, = 왼쪽에는 변수가 와야한다.
()로 감싸야 하는 이유지!!!
Assigning to new variable names]
-객체 구조분해를 사용하여 새로운 변수 이름에 값을 할당
아래서 p와 q는 변수가 아니다.
즉 foo와 bar 라는 변수를 선언해서 값을 구조분해로 할당받는 것임.
p와q는 구조분해가 일어날 객체의 키값을 그대로 가져온 것이다. 즉 변수가 아니다.
Setting a function parameter's default value]
-함수의 파라미터에 기본값 설정
-ES6 문법
함수의 매개변수에 {}는 객체를 인자로 받아서 구조분해 후 각 변수에 저장하겠다라는 의미
function drawES2015Chart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) {
console.log(size, coords, radius);
}
drawES2015Chart({
coords: {x: 18, y: 30},
radius: 30
});
====>big {x: 18, y: 30} 30 출력
Nested object and array destructuring]
-중첩된 객체와 배열 구조분해 할당을 통해 특정값을 변수에 담기 즉 추출하기
-for..of 문에서 구조분해하기(구조분해해서 내가 필요한 값만 빼내오기)*******
Unpacking fields from objects passed as function parameter]
-매개변수에 구조분해 사용*****
함수의 파라미터를 {매개변수1,매개변수2,... }감싸면 전달되는 객체를 구조분해해서 나열 된 매개변수에 할당하겠다는 의미임
-이 때 매개변수명은 반드시 객체의 키 명과 동일해야 한다,
var user = {
id: 42,
displayName: 'jdoe',
fullName: {
firstName: 'John',
lastName: 'Doe'
}
};
console.log('userId: ' + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
12. Shorthand Property
13. 메소드 축약 표현
-ES5에서 메소드를 선언하려면 프로퍼티 값으로 함수 선언식을 할당한다.
ES6에서는 메소드를 선언할 때, :function 키워드를 생략한 축약 표현을 사용할 수 있다.
-ES5문법
var obj = {
name: '가길동',
walk: function() {
console.log(this.name+'걷다');
}
};
obj.walk();
-ES6문법
const obj = {
name: '가길동',
walk() {
console.log(this.name+'걷다');
}
};
obj.walk();