반응 JSX

JSX는 단순히 JavaScript의 구문 확장입니다. JavaScript XML의 약자입니다. JSX는 React 구성 요소를 보다 쉽고 직관적으로 만들기 위해 React와 함께 사용할 수 있는 HTML과 유사한 구문입니다. 단지 목적은 React 구성 요소를 더 쉽게 만들 수 있도록 하는 것입니다.

JSX 사용의 이점:
형식이 안전하며 대부분의 오류는 컴파일 시간에 찾을 수 있습니다. 템플릿을 더 쉽게 만들 수 있습니다. 코드를 자바스크립트로 번역하면서 최적화를 수행하기 때문에 일반 자바스크립트보다 빠릅니다.

JSX 표현식:
JSX는 순수 JavaScript 구문으로 표현을 지원합니다. JSX 표현식은 HTML과 유사한 열린 태그로 시작하여 해당하는 닫는 태그로 끝납니다. JSX 태그는 XML 자동 닫기 구문을 지원하므로 선택적으로 닫기 태그를 해제할 수 있습니다. JSX 표현식은 ReactElements로 평가됩니다.

기능:
JSX는 사용자 정의 JavaScript 기능을 지원합니다. 함수 사용법은 표현식과 유사합니다.

속성:
JSX는 속성과 같은 HTML을 지원합니다. 모든 HTML 태그 및 해당 속성이 지원됩니다. JSX는 클래스가 JavaScript에서 예약된 키워드이기 때문에 HTML의 클래스가 JSX의 className이 되는 것과 같은 HTML의 표준 명명 규칙이 아닌 속성에 대해 낙타형 명명 규칙을 사용합니다. JSX에서 자체 사용자 정의 속성을 사용할 수도 있습니다. 사용자 정의 속성의 경우 data- 접두사를 사용해야 합니다.
예시:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     return(  
         <div>  
             <h1>react JSX</h1>  
             <h2>JSX atributes</h2>  
             <p demo-Attribute = "demo">This is custom attribute.</p>  

         </div>  
      );  
   }  
}  
export default App; 

이 예에서는 사용자 정의 속성인 demo-Attribute를 속성으로 사용했습니다.
꼬리표. JSX에서는 두 가지 방법으로 속성 값을 지정할 수 있습니다.

문자열 리터럴로:
큰 따옴표로 속성 값을 지정할 수 있습니다.

식으로:
중괄호 {}를 사용하여 속성 값을 표현식으로 지정할 수 있습니다.

JSX 주석:
JSX를 사용하면/*로 시작하고 */로 끝나는 주석을 사용하고 JSX 표현식의 경우처럼 중괄호 {}로 감쌀 수 있습니다.

JSX 스타일링:

React는 항상 인라인 스타일을 사용할 것을 권장합니다. 인라인 스타일을 설정하려면 camelCase 구문을 사용해야 합니다. React는 특정 요소의 숫자 값 뒤에 px를 자동으로 추가하는 것을 허용합니다.

예시:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     var myStyle = {  
         fontSize: 80,  
         color: 'black  
      }  
      return (  
         <div>  
            <h1 style = {myStyle}>JSX styling</h1>  
         </div>  
      );  
   }  
}  
export default App;