여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. React - JSX
React – JSX
4개월전 작성
5개월전 수정

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를 중괄호( {} )로 묶어야 한다.

참고
Mingg`s Diary
밍구
공부 목적 블로그