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