데브허브 | DEVHUB | [React.JS(19) + TypeScript] 06. JSX란? (리액트, react 강의)[React.JS(19) + TypeScript] 06. JSX란? (리액트, react 강의)
App.tsx 파일의 return 문에 일반적인 자바스크립트 문법과 달리 HTML과 유사한 문법이 사용됨을 지적합니다. 🧐
- 순수한 자바스크립트에서는
return 문이 템플릿 문자열이나 따옴표를 사용한 문자열 형태로 반환되어야 하지만, 리액트에서는 HTML과 유사한 형식을 그대로 사용합니다. 📜
- 이러한 자바스크립트 내 HTML 유사 문법이 바로 리액트의 핵심 문법 중 하나인 JSX입니다. ✨
- JSX는 JavaScript XML의 약자로, 자바스크립트를 확장하여 HTML과 유사한 문법을 작성할 수 있도록 만들어진 문법입니다. 🔗
- 페이스북 리액트 팀이 리액트를 더 쉽게 사용하도록 개발했으며, 자바스크립트와 UI 코드를 하나로 통합하여 손쉽게 작성할 수 있게 합니다. 🧑💻
- JSX 코드는 브라우저가 직접 실행할 수 없으므로, 트랜스파일러를 통해 자바스크립트 코드로 변환되어야 합니다. 🔄
- 현재 프로젝트에서는 TypeScript를 선택했기 때문에 ESBuild가 JSX를 자바스크립트 코드로 변환하는 역할을 담당합니다. 🛠️
- 핵심은 리액트가 JSX 문법을 사용하여 코드를 작성한다는 점입니다. 💡