React

JSX

JSX는 JavaScript XML을 의미한다.

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

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

JSX 코딩

JSX를 사용하면 HTML 요소를 자바스크립트로 작성하고 CreateElement() 또는 appendChild() 메서드 없이 DOM에 배치할 수 있다.

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

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

예제

JSX를 사용하는 예

const myElement = 
I Love JSX!
;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

예제

JSX를 사용하지 않는 예

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

 

JSX를 사용하면 JavaScript 코드 내에서 HTML을 직접 작성할 수 있다.

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

JSX의 표현식

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

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

예제

다음 표현식 5 + 5를 실행해보자.

const myElement = 
React is {5 + 5} times better with JSX
;

HTML 큰 블록 삽입

HTML을 여러 줄로 작성하려면 괄호 안에 HTML을 넣어보자.

예제

3개의 목록 항목으로 목록을 작성해보자.

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

최상위 요소

HTML 코드는 하나의 최상위 요소로 감싸야 한다.

그래서 두 문단을 쓰려면 div 요소처럼 부모 요소 안에 넣어야 한다.

예제

하나의 DIV 요소로 두 단락을 감싸보자.

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

 

⭐ JSX는 HTML이 정확하지 않거나 HTML이 상위 요소를 놓치면 오류를 발생 시킨다.

대안으로, 다수의 행들을 랩핑하기 위해 “조각”을 사용할 수 있다.
이것은 불필요하게 DOM에 여분의 노드들을 추가하는 것을 방지할 것이다.

조각은 비어있는 HTML 태그처럼 보입니다. &lgt></>.

예제

조각 안에 두 개의 단락을 묶는다.

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

요소는 닫혀 있어야 한다.

JSX는 XML 규칙을 따르므로 HTML 요소를 올바르게 닫아야 한다.

예제

빈 요소를 닫는다.

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

 

HTML이 제대로 닫히지 않으면 JSX에서 오류가 발생한다.

속성 클래스 = className

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

className 대신 속성을 사용하자.

⭐ JSX는 대신 className을 사용하여 이를 해결했다. JSX가 렌더링되면 className 속성을 클래스 속성으로 변환한다.

예제

JSX에서 class 대신 className 속성 사용

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

조건 – if 문

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

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

예제 – 옵션 1

JSX 코드 외부에서 if 명령문을 작성한다.

x가 10보다 작으면 “Hello”를 쓰고 , 그렇지 않으면 “Goodbye”를 쓴다.

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

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

예제 – 옵션 2

삼항 표현식을 사용한다.

x가 10보다 작으면 “Hello”를 쓰고 , 그렇지 않으면 “Goodbye”를 쓴다.

const x = 5;

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

 

JSX에 JavaScript 표현식을 삽입하려면 JavaScript를 중괄호( {} )로 묶어야 한다.