jsx란 무엇이며, 이는 자바스크립트에서 어떻게 변환되나요?
분야: 프론트엔드
JSX는 JavaScript XML의 약자로, React에서 UI를 선언적으로 표현하기 위해 사용하는 확장 문법입니다. HTML과 유사한 문법을 사용하여 JavaScript 코드 안에서 UI 구조를 직관적으로 표현할 수 있도록 해줍니다.
JSX는 브라우저에서 직접 실행할 수 없습니다. Babel과 같은 트랜스파일러를 통해 일반적인 JavaScript 코드로 변환된 후 실행됩니다. 예를 들면 다음과 같습니다.
const element = (
<h1 className="greeting">
Hello, JSX!
</h1>
);
위의 JSX 코드가 트랜스파일링 과정을 거치면 다음과 같은 JavaScript 코드로 변환됩니다.
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
여기서, React.createElement()는 React의 핵심 API 중 하나로, 가상 DOM 요소를 생성하는 역할을 합니다. 이를 통해 React는 요소를 트리 구조로 관리하고, 변경 사항을 효율적으로 감지해 실제 DOM에 반영합니다.
JSX는 반드시 React에서만 사용해야 하나요? React가 아닌 다른 환경에서도 사용할 수 있나요? 🤔
아닙니다. JSX는 React 전용이 아니며, 다른 라이브러리나 프레임워크에서도 사용할 수 있습니다.
JSX는 단순한 문법 확장이므로, 트랜스파일링을 통해 React 외의 라이브러리에서도 활용할 수 있습니다. JSX를 지원하는 라이브러리를 사용하면 React 없이도 JSX를 사용할 수 있습니다.
JSX에서는 왜 하나의 부모 요소로 감싸서 요소를 반환해야 하나요? 🧐
Javascript 문법 상, 하나의 함수에서 배열로 감싸지 않은 두 개의 객체를 반환할 수 없기 때문입니다. JSX도 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.