템플릿 리터럴(Template Literal)은 자바스크립트에서 문자열을 쉽게 조합하거나 여러 줄의 문자열을 표현하기 위해 사용하는 문법입니다. 기존의 문자열 표현 방식과 달리, 백틱(`)으로 감싸고, ${}를 사용해 변수를 삽입할 수 있습니다.
예시:
const name = "Alice";
console.log(`Hello, ${name}!`); // 출력: Hello, Alice!템플릿 리터럴은 변수 삽입, 여러 줄 문자열, 표현식 계산 등을 쉽게 할 수 있게 해줍니다.
"Hello, "
라는 '문자열' 안에 특정 '변수'를 삽입하고 싶을때
템플릿 리터럴을 쓴다.
네, url() 함수는 CSS에서 이미지를 배경으로 설정할 때 사용되며, 이 안에 문자열로 이미지 경로를 입력해야 합니다.
자바스크립트의 템플릿 리터럴(${})을 사용하여 동적으로 경로를 생성하려면, url() 함수 안에 템플릿 리터럴을 넣어 동적으로 변수를 처리하는 방식으로 사용하는 것입니다.
예시:
background-image: url(${props => props.src});이렇게 하면 props.src에 있는 값을 url() 함수의 인자로 전달하여 동적으로 이미지를 설정할 수 있습니다.
