리액트 ES6 문법

ES6 문법 : 템플릿 문자열(template string) 

-> 문자열 안에 변수와 연산식을 혼합하여 사용한다. 

 

특징1) 작은따옴표('') 대신 백틱(`)으로 문자열 표현

특징2) 템플릿 문자열에 특수 기호 $를 사용하여 변수 또는 식 포함 가능

 

예시) 병합 연산자로 표현된 코드를 템플릿 문자열로 바꿔보자

// 병합 연산자 사용
var cart = { name: '도서', price: 1500 };
var getTotal = function(cart) {
	return cart.price + '원';
};
var myCart = '장바구니에' + cart.name + '가 있습니다. 총 금액은 ' + getTotal(cart) + '입니다.';

// 템플릿 문자열 사용
var cart = { name: '도서', price: 1500 };
var getTotal = function(cart){
	return `${cart.price}원`;
};
var myCart = `장바구니에 ${cart.name}가 있습니다. 총 금액은 ${getTotal(cart)}입니다.`;

 

---

 

변수 사용하기(가변 변수, 불변 변수)

가변 변수 : let 키워드

-> let으로 선언한 변수는 읽거나 수정할 수 있다. 

 

불변 변수 : const 키워드

-> const로 선언한 변수는 읽기만 가능하다. 

-> 불변 변수는 값을 다시 할당할 수 없는 것이지 값을 변경할 수는 있다. 

 

---

화살표 함수

기존 자바스크립트의 함수 사용 방법

function add(first, second){
	return first + second;
}

var add = function(first, second) {
	return first + second;
}

화살표 함수 사용 방법 -> function 키워드 생략하고 인자 블록(())과 본문 블록({}) 사이에 => 표기

var add = (first, second) => {
	return first + second;
};

var add = (first, second) => first + second;

var addAndMultiple = (first, second) => ({ add: first + second, multiply: first * second });