반응 JSX

JSX 란 무엇입니까?

JSX는 JavaScript XML의 약자입니다.

JSX를 사용하면 React에서 HTML을 작성할 수 있습니다.

JSX를 사용하면 React에서 HTML을 더 쉽게 작성하고 추가할 수 있습니다.

JSX 코딩

createElement()  JSX를 사용하면 JavaScript로 HTML 요소를 작성 하고 appendChild()메소드 없이 DOM에 배치할 수 있습니다.

JSX는 HTML 태그를 반응 요소로 변환합니다.

다음은 두 가지 예입니다. 첫 번째는 JSX를 사용하고 두 번째는 다음을 사용하지 않습니다.

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

첫 번째 예에서 볼 수 있듯이 JSX를 사용하면 JavaScript 코드 내에서 직접 HTML을 작성할 수 있습니다.

JSX는 ES6 기반 JavaScript 언어의 확장이며 런타임 시 일반 JavaScript로 변환됩니다.

JSX의 표현식

JSX를 사용하면 중괄호 안에 표현식을 작성할 수 있습니다 { }.

표현식은 React 변수, 속성 또는 기타 유효한 JavaScript 표현식일 수 있습니다. JSX는 표현식을 실행하고 결과를 반환합니다.

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

큰 HTML 블록 삽입

여러 줄에 HTML을 작성하려면 HTML을 괄호 안에 넣으십시오.

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

하나의 최상위 요소

HTML 코드는 하나 의 최상위 요소 로 래핑되어야 합니다 .

따라서 두 단락을 작성 하려면 요소와 같은 상위 요소 내부에 두 단락을 넣어야 합니다 div.

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

또는 "조각"을 사용하여 여러 줄을 줄 바꿈할 수 있습니다. 이것은 불필요한 추가 노드를 DOM에 추가하는 것을 방지합니다.

조각은 빈 HTML 태그처럼 보입니다: <></>.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

요소를 닫아야 합니다.

JSX는 XML 규칙을 따르므로 HTML 요소를 제대로 닫아야 합니다.

const myelement = <input type="text" />;

속성 클래스 = className

class속성은 HTML에서 많이 사용되는 속성이지만 JSX는 JavaScript로 렌더링되고 키워드 class는 JavaScript에서 예약어이므로 JSX에서는 사용할 수 없습니다.

JSX는 이 문제를 className대신 사용하여 해결했습니다. JSX가 렌더링되면 className 속성을 class속성으로 변환합니다.

const myelement = <h1 className="myclass">Hello World</h1>;

조건 - if 문

React는 if명령문을 지원하지만 JSX 내부 에서는 지원하지 않습니다.

JSX에서 조건문을 사용하려면 명령문을 JSX if 외부에 배치하거나 대신 삼항 표현식을 사용할 수 있습니다.

옵션 1:

ifJSX 코드 외부에 명령문 작성 :

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

옵션 2:

대신 삼항 표현식을 사용하십시오.

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));