리액트
#1. 최신 자바스크립트
YJH3968
2021. 3. 23. 15:55
728x90
1. default parameter
- ES6 명세에 추가돼 함수의 parameter에 default value를 설정할 수 있다.
- 모든 type의 value(객체 포함)도 default value로 사용할 수 있다.
var defaultPerson = {
name: {
first: "길동",
last: "홍"
},
favActivity: "배드민턴"
};
function logActivity(p=defaultPerson) {
console.log(`${p.name.first}은(는) ${p.favActivity}을(를) 좋아합니다.`);
}
2. Arrow function
- function 키워드 없이 함수를 만들 수 있다.
- this를 새로 바인딩하지 않는다.
var gangwon = {
resorts: ["용평","평창","강촌","강릉"],
print: function(delay=1000) {
setTimeout(function() {
console.log(this.resorts.join(","));
}, delay);
}
};
gangwon.print();
- 위 코드의 경우 print 함수의 this가 window 객체이기 때문에 resorts가 undefined이다. 그래서 이 방법 대신 화살표 함수를 사용하면 this 영역이 제대로 유지된다.
var gangwon = {
resorts: ["용평","평창","강촌","강릉"],
print: function(delay=1000) {
setTimeout(() => {
console.log(this.resorts.join(","));
}, delay);
}
};
gangwon.print();
3. Transpiling
- ES6 기능은 브라우저에 따라 지원되지 않는 경우가 있는데 이러한 경우 ES6를 실행하기 전에 ES5로 컴파일해야 한다. 이러한 변환을 transpiling이라고 한다.
- 가장 유명한 transpiling 도구로는 Babel이 있다.
- 코드를 binary로 변환하는 것이 아니라 한 version의 javascript code를 다른 version의 javascript code로 변환한다.
// ES6 code
const add = (x=5, y=10) => console.log(x+y);
// transpiling 이후의 code
"use strict";
var add = function add() {
var x = arguments.length <= 0 || arguments[0] == undefined ? 5 : arguments[0];
var y = arguments.length <= 1 || arguments[1] == undefined ? 10 : arguments[1];
return console.log(x+y);
};
- inline Babel transpiler를 사용해 브라우저에서 javascript를 직접 transpile할 수도 있다.
- browser.js 파일을 포함시키고(HTML의 script 태그 사용), 변환하고 싶은 코드의 script 태그에 type="text/babel"을 지정하면 된다.
<div id="output"></div>
<!-- Babel loading -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 변환할 code를 script 태그 안에 넣기 -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
<!-- 파일에 있는 source code를 transpiling 하기 -->
<script src="script.js" type="text/babel"></script>
4. 구조 분해를 사용한 대입
- 구조 분해를 사용해 객체 안에 있는 필드 값을 원하는 변수를 대입할 수 있다.
var sandwich = {
bread: "더치 크런치",
meat: "참치",
cheese: "스위스"
}
var {bread, meat} = sandwich;
console.log(bread, meat);
5. 객체 리터럴 개선
- 구조 분해의 반대로 현재 영역에 있는 변수를 객체의 필드로 묶을 수 있다.
var name="탈락";
var elevation=9738;
var funHike = {name, elevation};
console.log(funHike); // {name: "탈락", elevation: 9738}
- 객체 method를 정의할 때는 더 이상 function 키워드를 사용하지 않아도 된다.
// 예전 방식
var skier = {
name: name,
sound: sound,
powderYell: function() {
var yell = this.sound.toUpperCase();
console.log(`${yell} ${yell} ${yell}!!!`);
},
speed: function(mph) {
this.speed = mph;
console.log('속력(mph):', mph);
}
}
// 새로운 방식
const skier = {
name,
sound,
powderYell() {
let yell = this.sound.toUpperCase();
console.log(`${yell} ${yell} ${yell}!!!`);
},
speed(mph) {
this.speed = mph;
console.log('속력(mph):', mph);
}
}
6. 스프레드 연산자
- 세 개의 점(...)으로 이루어진 연산자이다.
- 배열의 내용을 조합할 수 있다.
var peaks = ["대청봉", "중청봉", "소청봉"];
var canyons = ["천불동계곡", "가야동계곡"];
var seoraksan = [...peaks, ...canyons];
console.log(seoraksan.join(', ')) // 대청봉, 중청봉, 소청봉, 천불동계곡, 가야동계곡
- 이를 활용해 원본 배열을 변경하지 않고 배열의 마지막 원소를 쉽게 얻을 수 있고, 배열의 나머지 원소를 얻을 수도 있다.
// 원본 배열을 변경하지 않고 마지막 원소를 쉽게 얻는 방법
var peaks = ["대청봉", "중청봉", "소청봉"];
var [last] = [...peaks].reverse();
console.log(last); // 소청봉
console.log(peaks.join(', ')); // 대청봉, 중청봉, 소청봉
// 배열의 나머지 원소를 얻는 방법
var lakes = ["경포호", "화진포", "송지호", "청초호"];
var [first, ...rest] = lakes;
console.log(rest.join(", ")); // 화진포, 송지호, 청초호
- 스프레드 연산자는 객체에도 사용할 수 있다.
var morning = {
breakfast: "미역국",
lunch: "삼치구이와 보리밥"
};
var dinner = "스테이크 정식";
var backpackingMeals = {
...morning,
dinner
};
console.log(backpackingMeals); // {breakfast: "미역국", lunch: "삼치구이와 보리밥", dinner = "스테이크 정식"}
7. ES6 모듈
- 모듈은 다른 javascript 파일에서 쉽게 불러서 활용할 수 있는 재사용 가능한 코드 조각을 말한다.
- 기존에는 모듈의 import와 export를 처리하는 라이브러리를 활용했으나 ES6부터는 자바스크립트가 자체적으로 모듈을 지원하기 시작했다.
- javascript는 각각의 모듈을 별도의 파일로 저장한다. 모듈을 외부에 export하는 방법에는 한 모듈에서 여러 javascript 객체를 외부에 노출시키는 방법과 모듈당 하나의 javascript 객체를 노출시키는 방법이 있다.
- export를 사용해 다른 모듈에서 활용하도록 이름을 외부에 export할 수 있다.
- 모듈에서 단 하나의 이름만 외부에 export하는 경우 export default를 사용한다.
- 모듈은 import 명령을 사용해 다른 자바스크립트 파일을 불러와 사용할 수 있다.
- 외부에 여러 이름을 노출한 모듈을 import하는 경우 객체 구조 분해를 활용할 수 있다.
// 기본 export 방식
// text-helper.js
export const print(message) => log(message, new Date());
export const log(message, timestamp) =>
console.log(`${timestamp.toString()}: ${message}`);
// 하나의 이름만 export하는 경우
// mt-freel.js
const freel = new Expedition("Mt. Freel", 2, ["water, "snack"]);
export default freel;
// import
import { print, log } from './text-helpers'
import freel from './mt-freel'
8. CommonJS
- 모든 version의 노드에서 지원하는 일반적인 모듈 패턴
- import 문을 지원하지 않고 대신 require 함수로 모듈을 import한다.
// CommonJS를 이용한 export 방법
const print(message) => log(message, new Date());
const log(message, timestamp) =>
console.log(`${timestamp.toString()}: ${message}`);
module.exports = {print, log};
// CommonJS를 import하는 방법
const { log, print } = require('./txt-helpers');
출처 : Learning React(2018)
728x90