React JSX

JSX 란?

JSX는 JavaScript XML의 약자입니다.

JSX를 사용하면 리액트로 HTML을 쓸 수 있습니다.

JSX를 사용하면 리액트에 HTML을 쉽게 쓰고 추가할 수 있습니다.

JSX 작성

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

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

JSX를 사용할 필요는 없지만 JSX를 사용하면 React 응용 프로그램을 쉽게 쓸 수 있습니다.

두 가지 예가 있습니다. 첫 번째는 JSX를 사용하고 두 번째는 사용하지 않습니다.

JSX 사용

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

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

JSX 미사용

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는 식을 실행하고 결과를 반환합니다.

예제 1

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

여러 HTML 블록 삽입

HTML을 여러 줄로 쓰려면 HTML을 괄호 안에 넣습니다.

예제 2

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

1개의 최상위 요소

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

그래서 두 단락을 쓰려면 div 요소처럼 상위 요소 안에 넣어야 합니다.

예제 3

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

HTML이 올바르지 않거나 HTML이 부모 요소를 놓치면 JSX는 오류를 발생시킵니다.

또는 “fragment”를 사용하여 여러 줄을 줄 바꿈할 수 있습니다. 이것에 의해, 불필요하게 노드를 DOM 에 추가하는 것을 방지할 수 있습니다.

fragment는 빈 HTML 태그와 같습니다. <></>

예제 4

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

요소는 필수로 닫아야 합니다.

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

예제 5

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

JSX는 HTML과 다르게 요소가 올바르게 닫히지 않으면 오류를 발생시킵니다.

class 속성 = className

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

대신 className 속성을 사용합니다.

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

예제 6

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

if 조건문

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

JSX에서 조건문을 사용할 수 있도록 하려면 if 문을 JSX 외부에 배치하거나 대신 삼항 연산자를 사용할 수 있습니다.

JSX 코드 외부에 if문 사용

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

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

삼항 연산자 사용

const x = 5;

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

JavaScript 식을 JSX에 포함시키려면 JavaScript를 중괄호 {} 로 묶어야 합니다.