[JS] 동적테이블 태그를 " "가 아닌 ``백틱으로 해주는 이유?

` ` 백틱을 사용해주는 이유는?

 

td 안에 style태그를 주고 싶은데 td태그의 " " 쌍따옴표와 style태그의 쌍따옴표가 겹쳐서 인식이 안된다.

이런 경우에 이스케이프 문자를 사용해줘야 하는데 번거로워지고 가독성도 좋지 못하게 된다. 

그래서 ` ` 백틱으로 묶어주고 style 태그는 " "로 그대로 표현해준다!

(안에다 style 태그를 사용하지 않으면 굳이 백틱을 사용하지 않아도 무방하다.)

 

사용예시!

$.ajax({
	url : "/reservation.do",
	type : 'post',
	data : { "placeRentLogSeq": placeRentLogSeq },
	dataType : "json",
	success : function(data) {
					
	//alert(rentDate);
	console.log("placeRentLogSeq : ", placeRentLogSeq);
	console.log("data : ", data);
	console.log("data : ", data[0].rentDate);
					
	var rentList = "";
	var rentDate = data[0].rentDate;
	var rent1 = data[0].rent1;
	var rent2 = data[0].rent2;
	var rent3 = data[0].rent3;
				    
	rentList += `<tr>`;
	rentList += `<td class="rentDate">\${rentDate}</td>`;
	rentList += `<td></td>`;
	rentList += `<td></td>`;
	rentList += `</tr>`;
					
    rentList += `<tr>`;
    rentList += `<td class="rentTimes">1타임(10:00~12:00)</td>`;
    rentList += `<td class="rentCnt">\${rent1}/15</td>`;
    if(rent1 < 15) {
        rentList += `<td class="padding-bottom"><a class="reservYBtn" href="javascript:placeRentAdd('\${rentDate}','1')">예약가능</a></td>`;
    } else {
        rentList += `<td class="padding-bottom"><a class="reservNBtn">예약불가</a></td>`;
    }
    rentList += `</tr>`;

    rentList += `<tr>`;
    rentList += `<td class="rentTimes">2타임(13:00~15:00)</td>`;
    rentList += `<td class="rentCnt">\${rent2}/15</td>`;
    if(rent2 < 15) {
        rentList += `<td class="padding-bottom"><a class="reservYBtn" href="javascript:placeRentAdd('\${rentDate}','2')">예약가능</a></td>`;
    } else {
        rentList += `<td class="padding-bottom"><a class="reservNBtn">예약불가</a></td>`;
    }
    rentList += `</tr>`;

    $(".modal_tbl").html(rentList);
    },
        error : function() {
            alert("error");
        },
});

 

설명을 더하자면 : 

 

위의 코드에서 백틱(``)을 사용한 이유는 ES6부터 도입된 Template Literal 문법을 활용하기 위해서이다. Template Literal은 문자열을 다루는 새로운 방식으로, 문자열 내에 변수나 표현식을 쉽게 포함시킬 수 있다.

백틱(` `)을 사용하면 문자열 내에서 ${ }를 사용하여 변수나 표현식을 삽입할 수 있다. 

또한, 문자열 내에 큰따옴표나 작은따옴표를 사용해야 할 때 이스케이프 문자를 사용하지 않아도 되므로 편리하다. 따라서, 백틱과 Template Literal을 사용하여 동적인 문자열을 구성할 수 있다.

 

따라서, 백틱을 사용하여 동적테이블을 생성하면 다중 줄 문자열과 변수 삽입, 표현식 형가 등을 활용하여 코드의 가독성과 유연성을 높일 수 있다.

 

1. 다중 줄 문자열 

const multiLineString = `이것은
여러 줄의
문자열입니다.`;

2. 변수 삽입

const name = "Alice";
const greeting = `안녕하세요, ${name}님!`;

3. 표현식사용

const num1 = 10;
const num2 = 5;
const result = `두 수의 합은 ${num1 + num2}입니다.`;

 

위의 세가지 상황 시 유용하게 사용할 수 있다.