JSX에서 JavaScript 값과 HTML 구조를 안전하게 조합합니다.
JSX의 중괄호에는 표현식을 넣으며 className처럼 DOM과 이름이 다른 속성이 있습니다. 문자열은 기본적으로 escape되어 일반 사용자 텍스트가 HTML로 실행되지 않습니다.
문은 중괄호 안에 직접 넣지 말고 렌더 전에 값을 계산하거나 조건식과 map 같은 표현식을 사용합니다.
여러 형제 요소는 의미 있는 부모나 Fragment 하나로 감쌉니다.
검증하지 않은 입력을 dangerouslySetInnerHTML에 전달하면 XSS가 발생할 수 있습니다.
로컬 프로젝트에서 확인해보세요quantity를 바꿔 합계가 표현식으로 다시 계산되는지 확인하세요.
export default function App() {
const product = "키보드",
price = 72000,
quantity = 2;
const options = ["무선", "한글 배열"];
return (
<main>
<h1>{product}</h1>
<p>
{price.toLocaleString()}원 × {quantity}개
</p>
<ul>
{options.map((option) => (
<li key={option}>{option}</li>
))}
</ul>
<strong>합계 {(price * quantity).toLocaleString()}원</strong>
</main>
);
}