React - JSX(Javascript XML)

REACT

JSX

React에서는 UI를 작성할 때 JSX를 사용하여 HTML처럼 보이는 코드를 작성함

JSX는 실제로 JavaScript 코드로 변환되어 실행됨

JSX를 사용하면 HTML 구조를 쉽게 작성하면서도 JavaScript의 강력한 기능을 함께 사용할 수 있음

 

JSX는 HTML을 JavaScript 안에 포함시킬 수 있게 해주는 특별한 문법

React에서는 UI를 구성할 때 JSX를 사용해 화면에 보여줄 내용을 직관적으로 작성할 수 있음

JSX 문법

JSX 문법은 HTML과 유사하지만 JavaScript 코드 안에서 사용된다는 점에서 차이가 있음

예를 들어 HTML에서는 <div> 태그를 사용하지만

JSX에서는 컴포넌트나 HTML 태그를 JavaScript 코드 내에 직접 작성할 수 있음

 

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

이 코드는 React가 처리할 수 있는 JSX 코드임

JSX는 React.createElement 함수로 변환되어 실제 DOM을 업데이트

 

Babel 같은 도구가 JSX 코드를 React.createElement 함수로 아래와 같이 변환

const element = React.createElement('h1', null, 'Hello, World!');

 

JSX의 특징

• className: HTML의 class 속성 대신 JSX에서는 className을 사용해야함
  class가 JavaScript의 예약어이기 때문
• self-closing 태그: JSX에서는 self-closing 태그가 필요
  예를 들어 <img>나 <input> 태그는 반드시 닫는 태그를 포함해야함

const image = <img src="image.jpg" alt="Example" />;