'literal'에 해당되는 글 1건

ES6+ 탬플릿 리터럴로 동적인 문자열 만들기

React 2020. 12. 8. 00:17

ES6+ 템플릿 리터럴로 동적인 문자열 만들기



#1 Template literals(템플릿 리터럴)을 사용한 코드



var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

템플릿 리터럴은 이중 따옴표나 작은 따옴표 대신 백틱(Grave accent)를 사용합니다.

플레이스 홀더 $와 중괄호( ${ expression } )를 사용해 표현식과 그 사이의 텍스트를 함께 전달합니다.

엔터키를 이용해 개행처리까지 가능합니다.



#2 Nesting templates(템플릿 중첩) 코드


예를들어, header태그의 class를 정할때 삼항연산자를 통해 class에 넣을 텍스트를 그대로 출력할 수 있습니다.


먼저 ES5 에서는


var classes = 'header'
classes += (isLargeScreen() ?
'' : item.isCollapsed ?
' icon-expander' : ' icon-collapser');



두번째로 ES2015에서 중첩(nesting)없이 템플릿 리터럴을 사용한 경우


const classes = `header ${ isLargeScreen() ? '' :
(item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

${ expression }을 사용해 script를 사용함.


ES2015에서 nested 템플릿 리터럴을 사용한 경우


const classes = `header ${ isLargeScreen() ? '' :
`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

코드 가독성이 많이 높아 진다.



#3 Tagged templates(태그된 템플릿) 코드


tagged template(태그된 템플릿)는 template literals(템플릿 리터럴)의 더욱 발전된 형태입니다.

tagged template(태그된 템플릿)는 함수로 정의된다.

사용방법은 아래와 같이 함수명에 template literals(템플릿 리터럴)을 붙여서 사용한다


// 함수 정의
function taggedFn(strings, ...expressions) { // 1번
return "Something.";
}

const val1 = 12;
const val2 = 34;
const result = taggedFn`first-${val1}-second-${val2}`; // 2번
console.log(result); // 'Something.'

1번에서 taggedFn이라는 tagged template(태그된 템플릿) 함수를 정의한다.

2번에서 taggedFn 함수를 호출한다. 여기서 함수명과 template literals(템플릿 리터럴)을 붙여서 사용하는 점이 우리가 알고 있던 문법과 다르기 때문에 어색할 수 있다.

여기서 template literals(템플릿 리터럴) 표현식( ${ } )을 기준으로 일반 strings과 expressions를 파싱하여 배열로 만들어 매개변수로 넣어 준다.

strings : ['first-', '-second-', '']

expressions : [12, 34]


아래의 여러 가지 예제를 통해 매개변수 strings, expressions 값이 어떻게 파싱되는지 알아보자.


const val1 = 12;
const val2 = 34;

taggedFn`first-${val1}-second-${val2}-third`;    // 1번
// string : ['first-', '-second-', '-third' ];
// expressions : [12, 34] ;

taggedFn`first-${val1}-second-${val2}`;         // 2번
// string : ['first-', '-second-', '' ];
// expressions : [12, 34] ;

taggedFn`${val1}-second-${val2}`;                // 3번
// string : ['', '-second-', '' ];
// expressions : [12, 34] ;

// 함수 정의
function taggedFn(strings, ...expressions) {
console.log(strings.length === expressions.length + 1); // true
}

2번, 3번의 strings 배열값을 자세히 보면 template literals(템플릿 리터럴) 표현식으로 시작거나 또는 끝나면 '' 빈 문자열이 들어가는 것을 확인할 수 있다.

1번, 2번, 3번의 expressions값을 동일하다.

이 결과로 strings 배열의 개수는 expressions 배열의 개수보다 항상 하나 더 많다는 점을 확일할 수 있다.


tagged template(태그된 템플릿)을 활용해 expressions로 전달된 문자열을 HTML strong 태그로 감싸 강조를 하는 함수를 만들어 보자.


function setStrongify(strings, ...expressions) {
return strings.reduce(
(preValue, str, i) => expressions.length === i
? `${preValue}${str}`
: `${preValue}${str}<strong>${expressions[i]}</strong>`
, '');
}

const val1 = 12;
const val2 = 34;
const result = setStrongify`first ${val1} second ${val2}`;
console.log(result);
// first <strong>12</strong> second <strong>34</strong>


tagged template(태그된 템플릿) 함수의 반환값이 꼭 문자열이 아니어도 된다.

참고로 react에서 사용하는 스타일 적용 패키지 styled-components는 tagged template(태그된 템플릿) 함수가 리액트 컴포넌트를 반환한다.



저작자표시

'React' 카테고리의 다른 글

ES6+ 향상된 비동기 프로그래밍(3) - async await  (0) 2020.12.05
ES6+ 향상된 비동기 프로그래밍(2) - 프로미스 활용  (0) 2020.12.04
ES6+ 향상된 비동기 프로그래밍(1) - 프로미스  (0) 2020.11.24
ES6+ 향상된 함수 기능 (2) - Arrow function  (0) 2020.11.21
ES6+ 향상된 함수 기능 (1) - 매개변수  (0) 2020.11.18
블로그 이미지

steadily

,

공지사항

글 보관함

달력

«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

티스토리툴바