React에서 JSX는 도대체 무엇입니까?
내가 말했듯이 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>
);
}
Reference
이 문제에 관하여(React에서 JSX는 도대체 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mirhussain/what-the-heck-is-jsx-in-react-3f0a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)