무작정 부딪쳐서 React를 공부하는데 필요한 기초적인 ES6 문법을 짚고 넘어가기로 했다.
그 첫 번째, 문자열을 쉽게 만들 수 있는 템플릿 문자열을 알아보자.

🙄템플릿 문자열이란?

간단하게 말해서 내장된 표현식을 허용하는 문자열 리터럴이다.
따옴표 대신 ``(백틱) 문자로 문자열을 감싸서 만드는데 ${} 안에 표현식을 넣어 값이나 간단한 식 등 자바스크립트 문법을 문자열 안에 사용할 수 있다.

➕문자열 합치기

// in ES5
var string1 = '안녕하세요?';
var name = 'CrackCo'
var string2 = '입니다.';
var result = string1 + ' ' + name + string2;
console.log(result);
// 안녕하세요? CrackCo입니다.

위의 총 3개의 문자열을 합치는데 + 연산자와 띄어쓰기를 위한 ' ' 문자 등 이것저것 추가되는 것이 많다.
하지만 ES6의 템플릿 문자열을 사용한다면 간단해진다.

var string1 = '안녕하세요?';
var name = 'CrackCo'
var string2 = '입니다.';
var result = `${string1} ${name}${string2}`
console.log(result);
// 안녕하세요? CrackCo입니다.

참 간단하지 않은가? 문자열을 작성하는데 ${}으로 원하는 변수의 값을 넣고 쭉 작성하면 된다.

↩️여러줄로 작성하기

// in ES5
var string = 'string1\nstring2';
console.log(string);
// string1
// string2

만약 문자열을 작성하는데 중간에 줄 바꿈을 하고 싶다면 개행 문자 \n를 삽입해야 한다. 하지만 우리가 단순히 읽기에는 보기와 출력이 다르기 때문에 조금은 헷갈릴 수 있다.
하지만 템플릿 문자열은 이것마저 해결해준다.

var string = `string1
string2`;
console.log(string);
// string1
// string2

백틱 ``문자를 사용하면 줄 바꿈을 원할 때 엔터를 쳐서 말 그대로 줄을 바꾸면 된다.

🔢표현식 넣기

// in ES5
var boolean = true;
var string = '불리언 값은 ' + (boolean ? '참' : '거짓');
console.log(string);
// 불리언 값은 참

문자열을 작성하는 도중 식을 넣어야 한다면 역시나 문자열과 분리하여 식을 작성해야 한다.
하지만 템플릿 문자열에선 단순히 ${}만 사용하면 된다.

var boolean = true;
var string = `불리언 값은 ${boolean ? '참' : '거짓'}`
console.log(string);
// 불리언 값은 참

백틱`` 문자열 안에 ${}을 사용해서 표현식을 넣으면 해결된다.😁