이미지 경로 변수는 왜 중괄호 '{}'에 담아야 할까?

언제 ""와 {}를 각각 사용할까?

1. 정적 값(일정한 경로) → ""

• 이미지 경로가 고정되어 있고, JavaScript 로직이 필요하지 않을 때.

tsx

코드 복사

<img src="/images/tarot-cards.jpg" alt="Tarot Cards" />

2. 동적 값(변수나 표현식) → {}

• 이미지 경로를 변수로 관리하거나, 로직에 따라 경로를 설정해야 할 때.

tsx

코드 복사

import tarotCard from "../Image/tarot-cards.jpg"; <img src={tarotCard} alt="Tarot Cards" /> // 경로가 조건에 따라 달라질 경우 <img src={isSpecial ? "/images/special-card.jpg" : "/images/regular-card.jpg"} alt="Tarot Cards" />

---

요약

• "": HTML처럼 정적인 문자열을 넣을 때 사용.
• {}: React JSX에서 JavaScript 표현식을 삽입할 때 사용.