🌱 기초 프론트엔드
템플릿 리터럴이 뭔가요?
쉽게 이해하기
편지를 쓸 때 빈칸에 이름을 채워 넣는 것처럼, 템플릿 리터럴은 문자열에 변수나 표현식을 쉽게 삽입할 수 있게 해줘요. 일일이 문자열을 이어붙일 필요 없이, 자연스럽게 문장 안에 값을 넣을 수 있습니다.
핵심 정리
JavaScript에서 문자열을 더 편리하게 만들 수 있는 문법입니다.
자세히 알아보기
템플릿 리터럴은 ES6(ES2015)에서 도입된 JavaScript 문법으로, 백틱(`)을 사용해서 문자열을 만듭니다. 일반 따옴표 대신 백틱을 쓰면 문자열 안에 변수나 표현식을 `${}`로 감싸서 바로 넣을 수 있어요.
예를 들어 기존 방식으로는 `"안녕하세요, " + name + "님"`처럼 + 기호로 이어붙여야 했지만, 템플릿 리터럴을 사용하면 `안녕하세요, ${name}님`처럼 훨씬 깔끔하게 작성할 수 있습니다. 특히 긴 문자열이나 여러 변수를 포함할 때 가독성이 훨씬 좋아져요.
여러 줄 문자열도 쉽게 작성할 수 있습니다. 일반 따옴표에서는 줄바꿈을 위해 `\n`을 사용해야 하지만, 템플릿 리터럴에서는 그냥 엔터를 치면 돼요. HTML 코드를 JavaScript 안에 작성할 때 특히 유용합니다.
표현식도 직접 넣을 수 있어요. `${price * quantity}원`처럼 계산식을 바로 삽입하거나, `${user.isLoggedIn ? '로그아웃' : '로그인'}`처럼 조건문도 사용할 수 있습니다. 현대 JavaScript 개발에서는 템플릿 리터럴이 표준처럼 사용되고 있어요.