1. JSX(Javascript Syntax eXtension) 란?

JavaScript in XML로 JavaScript에서 HTML 코드를 사용하는 문법입니다.

JSX는 리액트로 개발할 때 사용하는 문법으로 공식적인 자바스크립트 문법은 아닙니다.

브라우저에서 실행하기 전 바벨을 사용하여 자바스크립트 형태로 코드가 컴파일됩니다.

주의! JSX는 HTML과 다른 문법으로 차이점이 존재합니다.

JSX의 장점

• 직관적인 코드 작성 : JSX는 마치 HTML을 작성하는 것처럼 React 컴포넌트의 구조를 직관적으로 작성할 수 있게 해줍니다. 이로 인해 코드의 가독성이 높아집니다.
• 컴포넌트 재사용 : 컴포넌트를 재사용하면서 코드를 간결하게 만들 수 있습니다.
• 가상 DOM을 통한 효율적인 렌더링 : JSX는 React의 가상 DOM과 함께 작동하여 렌더링을 효율적으로 수행합니다.

JSX의 기본 구조

JSX코드는 다음과 같은 기본 구조를 가집니다.

const element = <h1>Hello, world!</h1>;

위 코드는 h1 요소를 생성하며, 이 요소의 내용은 "Hello, world!"입니다.

JSX의 동작 원리

JSX는 JavaScript의 확장 문법이기 때문에, 브라우저에서 직접 실행할 수 없습니다. 따라서 Babel과 같은 트랜스파일러를 사용하여 일반 JavaScript 코드로 변환한 후 실행합니다. 예를 들어, 위의 JSX 코드는 다음과 같이 변환됩니다.