JSX란 무엇인가
JSX는 JavaScript에 XML을 결합한 문법으로, UI를 선언적으로 기술할 수 있게 해줍니다. 마치 HTML처럼 보이지만 JavaScript 코드 안에서 사용하는 문법입니다. HTML과의 가장 큰 차이점은 JSX에서는 JavaScript 표현식을 중괄호 {}로 삽입할 수 있다는 것입니다.
JSX는 마치 '레고 블록을 조립하듯' 화면 요소들을 조립할 수 있도록 도와주는 역할을 합니다. JavaScript로 UI를 그릴 수 있지만, JSX를 쓰면 훨씬 읽기 쉽고 구조화된 코드가 됩니다.
기본 개념
- JSX는 반드시 하나의 루트 엘리먼트를 반환해야 합니다
- 중괄호 {}로 JavaScript 표현식을 사용할 수 있습니다
- Babel이 JSX를 React.createElement()로 변환합니다
주요 사용 위치/상황
- 화면 구성 요소를 표현할 때
- 동적인 텍스트, 속성 삽입이 필요할 때
구체적 코드 예시
function App() {
const name = 'React';
return <h1>Hello, {name}!</h1>;
}
핵심 요점 정리
- JSX는 HTML과 유사한 JavaScript 확장 문법입니다
- 중괄호로 동적인 값을 삽입할 수 있습니다
- 컴포넌트는 반드시 하나의 루트 노드를 반환해야 합니다
- JSX는 결국 JavaScript로 변환되어 실행됩니다
💬 댓글
이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.
'프론트엔드 개발 실무 > React 기초부터 프로젝트까지' 카테고리의 다른 글
[ vite+React 기초학습 4]컴포넌트 스타일링 방법 (CSS 모듈, 스타일 객체) (0) | 2025.06.09 |
---|---|
[ vite+React 기초학습 3] 컴포넌트의 구성과 분리 (0) | 2025.06.09 |
[ vite+React 기초학습 1] Vite와 React 소개 및 개발 환경 구축 (0) | 2025.06.09 |
[ vite+React 기초학습 ] 강의안 (0) | 2025.06.09 |
(입문자 필독)프론트엔드 개발을 위한 자바스크립트 기초 가이드 (0) | 2025.06.09 |