AI 요약관련 정보

• JSX는 JavaScript의 문법 확장으로, HTML과 유사한 마크업을 작성하면서 JavaScript의 모든 기능을 활용할 수 있게 합니다. ✍️
• 기존 기술별 분리(HTML, CSS, JS) 방식에서 벗어나, React는 '관심사' 또는 '컴포넌트'별로 분리하여 마크업과 로직을 함께 관리하며 컴포넌트의 응집성을 높입니다. 🔄
• JSX는 React.createElement()를 직접 사용하는 방식보다 코드를 훨씬 더 읽기 쉽게 만듭니다. 👁️
• JSX 없이 컴포넌트를 만들려면 React.createElement() 메서드를 사용해야 하며, 이는 HTML 요소, 속성(객체 또는 null), 자식 요소(텍스트 또는 중첩된 createElement 호출)를 인수로 받습니다. 🧱
• React.createElement()를 사용하여 중첩된 요소를 표현할 때, 여러 번의 createElement 호출이 중첩되어 코드가 매우 복잡하고 이해하기 어려워집니다. 🕸️
• JSX는 개발 편의를 위한 '문법적 설탕(Syntactic Sugar)'이며, 트랜스파일러(예: Babel)에 의해 자동으로 React.createElement() 호출로 변환됩니다. 🍭
• 개발자는 HTML과 유사한 깔끔한 문법으로 코드를 작성하고, React는 필요한 createElement 호출을 얻게 되어 개발 효율성과 가독성을 동시에 잡을 수 있습니다. ✅
• JSX는 HTML과 완전히 동일하지 않으므로, JSX만의 규칙과 특별한 기능들을 추가로 학습해야 합니다. 💡