ES6 For React (2)

👉 Template literals

내장된 표현식을 허용하는 문자열 리터럴
템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(``)을 사용한다.
템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있다.
역 따옴표(backticks)을 사용하여 문자열을 연결하거나 문자열 중간에 변수를 삽입하여 사용할 수 있다.
그리고 back tick 으로 감싸면 그 안에 변수를 넣어서 표현할 수 있습니다.

const name = '김개발';
const hi = `안녕하세요. 저는 ${name} 입니다.`;

또한 ${}에는 값을 만들어내는 자바스크립트 식이라면 어떤 것이든 들어갈 수 있다.
그리고 백틱사용시 string을 입력한대로 개행이 된다.

let detail = `자세히 
보아야
이쁘다
 
내코드..`;
console.log(detail);

플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달된다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 준다.

// ES5
var student = {
 name: 'John Kagga',
 city: 'Kampala'
};

var message = 'Hello ' + student.name + ' from ' + student.city;
console.log(message); // Hello John Kagga from Kampala

// ES6
let message = `Hello ${student.name} from ${student.city}`;
console.log(message); // Hello John Kagga from Kampala

👉 Default Parameter (디폴트 파라미터)

함수 호출시에 값을 지정하지 않으면 디폴트 값을 사용할 수 있다.

function greet(name = 'Fellow', greeting = 'Welcome') {
 return `${greeting} ${name}`;
}

console.log(greet()); // Welcome Fellow
console.log(greet('Elise')); // Welcome Elise
console.log(greet('Mike', 'Hi')); // Hi Mike

👉 Spread Operator(스프레드 연산자)

스프레드 연산자는 ... 세개의 점으로 이루어진 연산자로, 몇 가지 다른 역할을 담당한다.

//반복가능한 객체를 확장(열거)하기

const cities = ["Kampala", "Nairobi", "Lagos"];
console.log(...cities); // Kampala Nairobi Lagos
//여러 배열을 조합하기
const east = ["Uganda", "Kenya", "Tanzania"];
const west = ["Nigeria", "Cameroon", "Ghana"];

const countries = [...east, ...west];
console.log(countries); // [ 'Uganda', 'Kenya', 'Tanzania', 'Nigeria', 'Camero'] 

👉 Rest Parameters

스프레드연산자와 기능은 비슷하지만, 반환되는 형태가 다르고, 둘 모두 자신이 가지고 있는 엘리멘트를 인덱스 별로 쪼개어 요소별로 나열하여 사용할 수 있다
Spread operator는 대상 배열의 요소, 또는 스트링처럼 반복이 가능한 (즉, 인덱스가 있는)요소들을 개별적인 요소들로 다시 반환하는것이고
Spread 연산자가 배열이나 스트링의 구조를 파괴(?)해서 개별인자로 내보내는 것과는 달리 Rest parameters는 다수의 요소들을 배열로 묶어준다. Rest parameters는 다수의 파라미터를 함수 안에 넣을 때 이들을 배열의 형태로 활용하고 싶을 때 유용하다.

function console_by_rest_parameters(...element) {
	console.log(element)
}

console_by_rest_parameters(1,2,3,4,5) // [1,2,3,4,5]
console_by_rest_parameters(`Kim`,`Aiden`,`red`) // [`Kim`,`Aiden`,`red`]