JSX 소개

JSX 소개

JSX는 기본적으로 일반 JavaScript의 구문 확장이며 React 요소를 만드는 데 사용됩니다. 그런 다음 이러한 요소는 React DOM으로 렌더링됩니다.

샘플 JSX 코드를 살펴보겠습니다.

왜 JSX인가?

일반 JavaScript로 번역하는 동안 최적화를 수행하므로 일반 JavaScript보다 빠릅니다.

템플릿을 더 쉽게 만들 수 있습니다.

마크업과 로직을 별도의 파일로 분리하는 대신 React는 이러한 목적으로 구성 요소를 사용합니다.

React에서는 JSX와 함께 일반 JavaScript 표현식을 사용할 수 있습니다. JSX로 작성된 코드에 JavaScript 표현식을 삽입하려면 해당 표현식을 중괄호 {}로 묶어야 합니다.

다음 코드를 고려하십시오.

**Output**

위의 프로그램에서 우리는 javascript 식 const name = "Geeks"; JSX 코드에서. 중괄호로 묶음으로써 JSX에서 JavaScript 표현식의 사용을 내장합니다.

JSX 표현식

표현식은 JavaScript 구문으로 작성된 JSX에서도 지원됩니다. 표현식은 중괄호로 묶여 있습니다. 식은 if-else 및 for 루프와 같은 조건문을 포함할 수 있습니다. 다음 코드는 JSX 표현식의 예입니다.

**Output**

JSX 속성

JSX를 사용하면 일반적인 HTML과 마찬가지로 HTML 요소와 함께 속성을 사용할 수 있습니다. 그러나 HTML의 일반적인 명명 규칙 대신 JSX는 속성에 카멜케이스 규칙을 사용합니다. 예를 들어 HTML의 class는 JSX의 className이 됩니다. 이것의 주된 이유는 'class'와 같은 HTML의 일부 속성 이름이 JavaScript에서 예약된 키워드이기 때문입니다. 따라서 이 문제를 피하기 위해 JSX는 속성에 카멜 케이스 명명 규칙을 사용합니다.

Output:

JSX의 주석

JSX를 사용하면 JavaScript 표현식을 사용할 수 있으므로 주석을 사용할 수 있습니다. JSX의 주석은/*로 시작하여 */로 끝납니다. 표현식의 경우와 마찬가지로 JSX에서 중괄호 {}로 감싸서 주석을 추가할 수 있습니다. 아래 예제는 JSX에서 주석을 추가하는 방법을 보여줍니다.