[ React ] JSX(JavaScript Xml)

JSX(JavaScript XML) 은 React 에서 사용되는 JavaScript 의 확장문법이다.

이는 UI를 표현하기 위한 React 요소를 생성하는데 도움이 되는 간편하고 가독성이 높은 문법을 제공한다.

JSX 는 Javascript 코드 안에서 XML 또는 HTML 과 유사한 구문을 사용하여 작성된다.

XML(Extensible Markup Language)

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

위의 예제에서 <h1>과 </h1> 사이에 있는 부분이 JSX 이다.

이것은 React 요소를 나타내며, 이는 React 가 가상 DOM을 사용하여 실제 DOM 업데이트를 최적화할 수 있도록 한다.

JSX 특징과 이점

---

1. 가독성 향상: XML과 유사한 구문을 사용하므로 코드가 간결하고 가독성이 높아진다.

2. 표현력 향상: JavaScript 코드에서 UI 구조를 표현하는 데 있어 풍부한 표현력을 제공한다.

3. 컴파일 과정: JSX 코드는 JavaScript로 변환되어 브라우저에서 실행 가능한 코드로 컴파일된다.

4. React 요소 생성: JSX는 React 요소를 생성하며, React는 이를 사용하여 가상 DOM을 조작하고 실제 DOM을 업데이트 한다.

Uploaded by N2T