JSX는 무엇이며 HTML과 어떻게 다른가요?

이렇게 답해 보세요 (핵심 답변)

JSX는 JavaScript 코드 안에서 UI 구조를 직관적으로 작성할 수 있게 해 주는 문법 확장입니다. 브라우저가 직접 실행하는 HTML 문자열이 아니라, 빌드 도구를 통해 React 엘리먼트 객체를 생성하는 함수 호출로 변환됩니다. 중괄호 안에는 조건문 같은 문장(statement)이 아니라 값이 되는 JavaScript 표현식만 넣을 수 있으며, className이나 닫는 태그 규칙 등 HTML과 다른 문법 제약을 따릅니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 화면 구조와 렌더링 로직을 하나의 컴포넌트 안에서 응집도 있게 관리할 수 있습니다.
2. 중괄호 안의 표현식 평가 결과가 곧 UI의 props나 자식 값이 되므로 표현식과 문장의 차이를 명확히 구분해야 합니다.

면접에서 자주 하는 실수

JSX가 일반 문자열 삽입을 이스케이프해 준다고 해서 dangerouslySetInnerHTML이나 위험한 URL 속성까지 자동으로 안전해지는 것은 아닙니다.