[Javascript] 템플릿 리터럴 작성 방식

템플릿 리터럴 작성 방식이란?

 

템플릿 리터럴(Template Literal)은 ES6(ECMAScript 2015)에서 도입된 기능으로, 문자열을 보다 유연하게 작성할 수 있도록 도와주는 문법이다. 기존의 문자열 연결 연산자(+) 와 달리, 백틱(`) 을 사용하여 가독성을 높이고 표현식을 간편하게 삽입할 수 있다.

 

---

---

템플릿 리터럴 기본 문법

 

 

템플릿 리터럴을 사용하기 위해선 문자열을 감쌀때 큰 따옴표("), 작은 따옴표(')가 아닌 백틱(`)을 사용하면 된다.

const msg = `Hello World!`

console.log(msg)

 

 

---

표현식에서 템플릿 리터럴 사용하기

 

 

기존 방식에서는 문자열과 변수를 연결할 때 '+' 연산자를 사용했지만, 템플릿 리터럴에서는 ${} 안에 변수를 넣으면 자동으로 문자열과 결합된다.

/* 기존 자바스크립트 작성 방식*/
const name = "김철수";
const age = 25;

console.log("이름: " + name + ", 나이: " + age);


/* 템플릿 리터럴을 활용한 작성 방식 */

const name = "김철수";
const age = 25;

console.log(`이름: ${name}, 나이: ${age}`);

 

위 예시를 통해 알 수 있듯이 중간에 '+' 연산자가 들어가지 않기 때문에 코드 가독성이 매우 향산되는 것을 확인 할 수 있다.

 

또한, ${} 내부에는 단순 변수뿐만 아니라 연산식 및 함수 호출도 삽입할 수 있다.

 

const a = 10;
const b = 20;

console.log(`합: ${a + b}`);  // 출력: 합: 30
console.log(`랜덤 값: ${Math.random()}`);  // 랜덤한 값 출력

 

---

 

줄바꿈 문자열에서 템플릿 리터럴 사용하기

 

 

템플릿 리터럴을 사용하면 여러 줄을 줄바꿈 해야하는 문자열을 쉽게 작성 할 수 있다.

/* 기존 자바스크립트 작성 방식 '\n' 사용*/
const oldText = "첫 번째 줄\n두 번째 줄\n세 번째 줄";
console.log(oldText);



/* 템플릿 리터럴 작성 방식 */
const newText = `첫 번째 줄
두 번째 줄
세 번째 줄`;
console.log(newText);

 

위의 예제와 같이 실제 본문처럼 줄바꿈 해주면 데이터도 마찬가지로 줄바꿈이 된 형태로 출력되기 때문에 코드 가독성이 훨씬 좋아진다.

---

템플릿 리터럴을 사용하여 동적 HTML 생성하기

 

 

기존 자바스크립트에서는 동적 HTML요소를 생성할때 createdElement() 메서드를 사용했어야했다.

템플릿 리터럴을 사용하면 보다 더 쉽게 동적으로 HTML을 만들며 데이터를 기입 할 수 있다.

 

const user = { name: "Charlie", age: 28 };

const userCard = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>나이: ${user.age}</p>
  </div>
`;

console.log(userCard);

 

위와 같이 작성하면 동적인 HTML을 만들어 출력 할 수 있고, 서버에서 받아온 데이터 또한 쉽게 적용하여 화면에 출력 시켜 줄 수 있다.

 

---

 

위의 사용 방법을 포함해서 JSON 데이터를 변환 시 가독성을 향상 시키는 작업도 할 수 있으며 함수를 같이 활용하여 사용도 가능하다.

 

이 방법 또한 추후 포스트로 게시하겠다.