JSX

❓질문

jsx란 무엇이며, 이는 자바스크립트에서 어떻게 변환되나요?

💡 조사하기전 내가 알고 있던 내용

jsx문법은 JavaScript XML의 약자로 리액트에서 자바스크립트코드와 HTML의 UI파트를 합께 직관적으로 표현할 수 있게 해주는 확장 언어입니다.

단 언어는 브라우저에서 직접적으로 실행할 수 없어 Babel등의 트랜프파일러를 통해 자바스크립트 코드로 변환되고 실행이 됩니다.

🏫 정리한 내용

이때 추가적으로 왜 jsx에서 하나의 부모 요소로 감싸서 요소를 반환해야하는지도 알 수 있는데요
자바스크립트 문법 상, 하나의 함수에서 배열로 감싸지 않은 두 개의 객체를 반환할 수 없기 때문입니다. JSX도 HTML처럼 보이지만 내부적으로는 일반 자바스크립트 객체로 변환됩니다. 따라서 또 다른 태그나 프래그먼츠로 감싸지 않으면 두 개의 JSX 태그로 반환할 수 없습니다.