리액트

#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