2016-09-13 2 views
15

JSX는 무엇을 의미합니까?JSX는 무엇을 의미합니까?

ECMAScript에 대한 XML 유사 구문 확장으로 정의 된 JSX를 언급하고 있습니다.이 JSX는 ReactJS의 인기가 높아짐에 따라 널리 사용됩니다.

답변

21

JSX은 J 아바 S cript X ML 약자. React를 사용하면 XML과 유사한 코드를 요소 및 구성 요소로 확장 할 수 있습니다. (가) 문서를 반응하고 당신이 언급 한 바와 같이 당 :

JSX이 정의 된 의미 위의 인용에서

없이 ECMA 스크립트하기 위해 XML과 같은 구문 확장, 당신은 JSX이 정의하지 않는 것을 볼 수 있습니다 의미론적인 측면에서, 단순함과 우아함을 위해 XML과 유사한 코드를 작성할 수있는 JavaScript의 확장 일 뿐이고, JSX를 React.createElement이라는 순수 JavaScript 함수 호출로 변형 할 수 있습니다. Per React 자습서 :

JSX는 XML 구문을 JavaScript에 추가하는 전처리 단계입니다. JSX없이 React를 사용할 수는 있지만 JSX는 React를 훨씬 더 우아하게 만듭니다.

XML과 마찬가지로 JSX 태그에는 태그 이름, 속성 및 하위 태그가 있습니다. 속성 값이 따옴표로 묶인 경우 값은 문자열입니다. 그렇지 않으면 값을 중괄호로 묶으십시오. 값은 닫힌 JavaScript 표현식입니다.

JSX의 코드는 일반 JavaScript/ECMAScript로 변환됩니다. Login이라는 구성 요소를 고려하십시오. 이제 우리는 JSX 너무처럼 렌더링 :

<Login foo={...} bar={...} /> 

당신이 볼 수 있듯이이 JSX 그냥 반응의 구성 요소와 요소를 나타내는 태그를 위해 XML과 같은 구문을 가질 수 있습니다. 순수한 JavaScript로 변환되었습니다.

React.createElement(Login, { foo: ..., bar: ... }); 

at the docs을 더 읽을 수 있습니다.

+0

자세한 설명을 읽어 주셔서 감사합니다. 이것은 분명히 내가 찾던 답변의 종류입니다. – user2977636

4

JSXJavaScript는 구문 확장을 의미합니다. XML과 유사합니다. React로 간단한 JSX 구문 변환을 사용할 수 있습니다.

관련 문제