React에서 JSX, Babel, 그리고 Spread 연산자는 서로 밀접하게 연결되어 있습니다.
✅ JSX
JSX는 JavaScript 안에서 HTML처럼 UI 구조를 작성할 수 있게 해주는 문법 확장입니다.
브라우저는 JSX를 직접 이해하지 못하기 때문에 변환 과정이 필요합니다.
const element = <h1>{text}</h1>;
위 코드는 JSX이며, 실제로는 JavaScript 객체로 변환됩니다.
✅ Babel
Babel은 컴파일러(트랜스파일러) 역할을 하며,
JSX나 최신 JavaScript 문법(ES6+)을 브라우저가 이해할 수 있는 ES5 코드로 변환해 줍니다.
즉,
- JSX → React.createElement(…)
- 최신 문법 → 구형 브라우저 호환 코드
를 담당합니다.
✅ Spread 연산자 {...props}
Spread 연산자는 객체의 모든 속성을 한 번에 전달할 때 사용합니다.
<Component {...props} />
이는 아래와 동일합니다.
<Component
title={props.title}
value={props.value}
onClick={props.onClick}
/>
컴포넌트 재사용성과 코드 가독성을 크게 높여줍니다.
정리
- JSX: UI를 선언적으로 작성하는 문법
- Babel: JSX와 최신 JS 문법을 변환해주는 도구
- Spread 연산자: props를 효율적으로 전달하는 문법
React 개발에서는 이 세 가지가 기본적으로 함께 사용됩니다.