React에서 JSX는 도대체 무엇입니까?

JSX는 JavaScript XML을 나타냅니다. JSX를 사용하면 React 내부에서 HTML을 작성할 수 있습니다. JSX는 JavaScript의 구문 확장입니다. 이 기사에서는 키보드를 모니터에 부딪히지 않고 JXS를 사용하는 방법을 설명하려고 합니다. 요령을 터득하면 상당히 간단합니다.

내가 말했듯이 JSX를 사용하면 추가된 기능으로 HTML을 React에 직접 작성할 수 있습니다. 결국 빌드 프로세스babel 동안 일반 JavaScript로 코드를 변환합니다.

JSX 코드:

<Navbar color="gray" />

다음으로 컴파일:

React.createElement(
  Navbar,
  {color: 'gray'}
)

원하는 HTML 태그를 사용할 수 있습니다. 자식 요소가 없는 경우 해당 태그를 자체 닫는 태그로 사용할 수 있습니다.

JSX 코드:

<div className="imageContainer" />

다음으로 컴파일:

React.createElement(
  'div',
  {className: 'imageContainer'}

여기서 주의해야 할 점은 "class"키워드는 JavaScript의 예약어이기 때문에 사용할 수 없으므로 "className"을 대신 사용해야 한다는 것입니다. 또한 클래스 이름에 대시(-)를 사용할 수 없으므로 이름 지정에 camelCase를 사용해야 합니다.

사용자 생성 구성 요소는 대문자로 시작해야 합니다. 큰 반응이 없습니다. 이렇게 되어야 합니다.

JSX 구성 요소를 자식 요소로 전달할 수 있습니다. 간단한 HTML, JavaScript 표현식 및 함수를 자식으로 전달할 수도 있습니다.

<CartContainer>
<CartHeader/>

<h1>{name}</h1>
<p>Thank you</p>

</CartContainer>

부울, Null 및 Undefined는 렌더링할 때 무시됩니다. 오해하지 마세요. 이들은 유효한 아이들이지만 렌더링되지 않습니다. UI에서 렌더링하려면 문자열로 변환해야 합니다.

const answer = true;
<div>
  The answer is {String(true)}.
</div>

이 기사의 앞부분에서 JSX가 React.createElement에 대한 호출로 컴파일되므로 React가 범위 내에 있어야 함을 보았습니다. (스코프란?? "스코프"는 이 글의 범위를 벗어납니다. 다른 글에서 다루도록 하겠습니다.) 그렇다면 실제로 범위 안에 있다는 것은 무엇을 의미합니까? 단순히 components 각각에서 React를 가져와야 함을 의미합니다.

import React from 'react';

Props 이라는 것을 사용하여 JSX의 한 구성 요소에서 다른 구성 요소로 데이터를 보낼 수 있습니다. 등호 및 중괄호 다음에 데이터 이름을 입력하여 모든 JavaScript 표현식 및 문자열을 전달할 수 있습니다.

<ShoppingCart key={001}, name={"LV Wallet"}/>

if 문과 for 루프는 JavaScript의 표현식이 아니므로 Props로 보낼 수 없지만 주변 코드에서 사용할 수 있습니다.

function NumberDescriber(props) {
  let description;
  if (props.age > 18 ) {    
description = <strong>Underaged</strong>;  
} else { 
  description = <i>18+</i>; 
 }  

return (
<div>{props.number} is an {description} number</div>
);
}