styled-component
scss도, less도 스타일 파일이 분리되어 있는게 난잡하고 불편하다고 느껴질 시점에 styled-component를 접하게 되었다. styled-component는 클래스에 비해서 작명하기도 간단했고, 한 파일안에서 전부 처리할 수 있다는 장점이 너무 마음에 들어 진행하던 리액트 프로젝트에 바로 styled-component를 적용해보았다.
"스타일드 컴포넌트 문법이 좀 신기한 것 같아요"
styled를 import한 뒤 styled-component를 만들어보았는데, styled.div 뒤에 바로 오는 백틱 문자(backtick) ` 가 너무 신기했다. 이전까지는 본 적이 없었던 문법 같아 선배에게 이건 무슨 문법인지 물었다.
"템플릿 리터럴과 태그드 템플릿에 관해서 찾아봐"
리터럴을 한글 문서로 찾으려니 굉장히 애매모호한 대답들만 돌아왔다.
"데이터 그 자체", "변하지 않는 데이터" ... 흠 이대로는 잘 이해가 안됐다.
"그냥 영어 위키피디아를 한 번 봐봐"
그래서 바로 영어 위키피디아에서 Literal 이란 단어를 찾아보았다.
In computer science, a literal is a notation for representing a fixed value in source code.Notation. 표기법. 즉 리터럴이란 표기법이다. 즉 Literal이란, 소스코드에서 고정된 값을 표현하기 위한 표기법인 것이다!
템플릿 리터럴이란?
그렇다면 템플릿 리터럴은 무엇일까? 템플릿 리터럴이란, ES6에서 새로 도입된 문자열 표기법이다. 템플릿 리터럴은 백틱(backtick) ` 을 사용한다.
템플릿 리터럴은 몇 가지 장점을 가지고 있다.
Expression Interpolation
근래 들어서 ${}로 생긴 문법을 많이 찾아볼 수 있었는데, 나 또한 이름을 모르고 쓰다가 이번에 공부하면서 알게되었다.
Expression Interpolation은 문자열 사이에 자바스크립트 코드나 변수를 삽입하여야 할 때 유용하게 사용할 수 있는 기능이다.
기존에는 다음과 같이 +를 이용해서 문자열을 이어 붙어야 했다.
let value = 10;
console.log("음 이렇게 하고 나서 " + value + " 이렇게 더하기로 써줘야하는데");하지만 템플릿 리터럴과 Interpolation 기능을 사용하게 되면 다음과 같이 간단하게 표현이 가능하다.
let value = 10;
console.log(`음 이렇게 하고 나서 ${value} 이렇게 써주면 되지롱`);이렇듯 Expression Interpolation은 간단하게 변수를 표기하는 것 뿐만 아니라 자바스크립트 코드를 삽입할 수도 있는데, 나는 삼항 연산자를 자주 사용하는 편이다.
let gender = true;
console.log(`당신의 성별은 ${gender ? "남성" : "여성"}입니다.`);
// 결과: 당신의 성별은 남성입니다.Tagged Templates
Tagged Template은 템플릿 리터럴로 감싸진 내용들을 인자로 하여 함수에 대입할 수 있게 해주는 편리한 기능이다.
Tagged Template은 템플릿 리터럴 앞에 함수 이름을 표기해주기만 하면 된다. expression interpolation을 기준으로 문자열들이 분할되어 배열 형태로 함수의 첫번째 parameter로 전달된다. 두번째 파라미터부터는 expression interpolation에 들어간 값이 전달된다.
다음 코드는 단어의 순서를 뒤집는 함수이다. 사실 예시로 들만한 코드가 떠오르지 않아 임의로 작성해본 함수이다.
let name = '레쉬';
let age = 22;
function flip(strings, personName, personAge) {
let str0 = strings[0];
let str1 = strings[1];
return personAge + str1 + personName + str0;
}
let input = `Hello, ${name}, you are ${age}`;
let output = flip`Hello, ${name}, you are ${age}`;
console.log(input);
console.log(output);
// 결과
// Hello, 레쉬, you are 22
// 22, you are 레쉬Hello, 참고문서
MDN - Template Literals
Wikipedia - Literal (computer programming)
