ES6+ 향상된 Object, Array (1)
1. 객체와 배열의 생성과 수정을 간편하게.
#1 Shorthand property names (단축 속성명)
Literal Code를 간편하게 작성
const name = 'peter';
const obj = {
gender: 'male',
name, // 이미 정의 된 변수면 변수명 입력 {name: 'peter'}
getName() { return this.name},
// 함수형은 function 키워드 생략 { getName : function(){....}}
}
비교를 통해 어떻게 개선 되었는지 알아보자.
// 기존 함수 정의
function createUser(name, gender) {
return { name: name, gender: gender};
}
// 개선된 방법
function createUser(name, gender) {
return { name, gender};
}
이렇게 단축 속성명을 사용하면 코드 작성도 간편하고 가독성도 좋아진다.
아래와 같이 디버깅 시 많이 개선된 점을 확인할 수 있다.
const name = 'peter';
const gender = 'male';
// 기존방식
console.log('name =' + name, ', gender =' + gender);
// ES6+
console.log({ name, gender }); // { name: 'peter', gender: 'male' }
#2 Computed property names (계산된 속성명)
더 편리하게 동적으로 속성명을 결정할 수 있게 되었다.
계산된 속성명을 사용한 코드와 그렇지 않은 코드를 비교해보자.
function createObj1( key, val ) {
const obj = {};
obj[key] = val;
return obj;
}
function createObj2( key, val ) {
return { [key]: val };
}
계산된 속성명을 사용하면 createObj2 함수처럼 간결하게 작성할 수 있다.
이 기능을 컴포넌트의 상탯값을 변경할 때 사용하면 유용하다.
class CntComponent extends React.Component {
state = {
cnt1: 0,
cnt2: 0,
cnt3: 0,
};
// ...
onClick = idx => {
const key = `cnt${idx}`;
const val = this.state[key];
this.setState({ [key]: val + 1 }); // 1
}
}
1번에서 복잡해질수 있는 코드를 계산된 속성명을 사용하여 간결하게 작성하였다.
'React' 카테고리의 다른 글
| ES6+ 향상된 비동기 프로그래밍(1) - 프로미스 (0) | 2020.11.24 |
|---|---|
| ES6+ 향상된 함수 기능 (2) - Arrow function (0) | 2020.11.21 |
| ES6+ 향상된 함수 기능 (1) - 매개변수 (0) | 2020.11.18 |
| ES6+ 향상된 Object, Array (2) (0) | 2020.11.12 |
| ES6+ 변수를 정의하는 새로운 방법 ( const, let ) (0) | 2019.12.11 |
steadily