React JSX – React Vernacular Movement 06

머리말

React는 웹 및 모바일 프런트엔드 개발에 가장 널리 사용되는 JavaScript 패키지 중 하나입니다. Meta(이전 Facebook)에서 개발한 React를 사용하면 개발자는 재사용 가능한 구성 요소를 만들어 프런트 엔드 페이지를 완성할 수 있습니다.

그러나 엄밀히 말하면 React는 프레임워크가 아니라는 점에 유의해야 합니다. 이는 UI 요소 렌더링만 담당하기 때문입니다. 그러나 React는 Angular 및 Vue와 같은 프레임워크를 위한 또 다른 솔루션을 제공하므로 이를 통해 복잡한 프런트엔드 페이지 기능을 완성할 수 있습니다.

이 기사에서는 React – JSX의 중요한 구문을 소개합니다.

JSX는 현재 우리가 볼 수 있는 가장 일반적인 React 작성 방법이기도 하므로 다음에 소개하겠습니다.

JSX란 무엇입니까?
JSX 구문
JSX를 사용하여 React 구성 요소 구성

JSX란 무엇입니까?

JSX를 설명하기에 앞서, 이전 글에서 설명한 React로 DOM을 생성하기 위한 DOM 구문을 살펴보겠습니다.

				
					const 접시 = React.createElement("h1", "Hello World") ReactDOM.render(dish, document.getElementById("root"))

위의 React 구문은 다음 HTML DOM으로 변환될 수 있습니다.

				
					<div id="root">
	<h1><span class="ez-toc-section" id="hello-world"></span>안녕하세요 세계<span class="ez-toc-section-end"></span></h1>
</div>

위의 코드를 보면 JavaScript의 React 구문은 상대적으로 이해하기 어렵고, 수천 줄의 복잡한 HTML 파일이라면 코드가 훨씬 더 복잡하고 이해하기 어려울 것이라고 쉽게 상상할 수 있습니다.

따라서 React를 개발하는 동안 Facebook 팀은 이러한 단점을 해결하기 위해 프런트 엔드 웹 구성 요소를 구성하는 더 간단한 구문인 JSX도 추가했습니다.

JSX는 "JS" JavaScript와 "X" XML이라는 두 단어로 구성된 약어입니다. JSX는 HTML과 다소 유사하지만 실제로는 React 구문을 사용하여 구성 요소를 구성합니다. 다음은 간단한 JSX 예제입니다.

				
					import React from 'react-dom/client'; const myElement = ( <ul> <li>사과</li> <li>바나나</li> <li>체리</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root'));

중간 부분은 HTML 구문과 거의 동일하지만 프로그램의 시작과 끝은 모두 JavaScript 구문임을 알 수 있습니다.

컴퓨터는 실제로 JSX 구문을 번역하기 위해 몇 가지 도구를 사용하고 최종적으로 순수한 HTML을 생성합니다. 다음 기사에서는 이러한 도구도 설명합니다.

JSX 구문

JSX 구문은 HTML처럼 보이지만 사실은 JavaScript와 React의 구문이므로 여기서는 JSX 구문에 대해 설명하겠습니다.

클래스 이름

일반적인 HTML 구문에서 태그에 클래스를 추가하려면 다음 작성 방법을 사용합니다.

				
					<h1 class="hi"><span class="ez-toc-section" id="hello-world-2"></span>안녕하세요 세계<span class="ez-toc-section-end"></span></h1>

하지만 JSX 구문에서 태그에 클래스를 추가하려면 className으로 변경해야 합니다.

				
					<h1 classname="hi"><span class="ez-toc-section" id="hello-world-3"></span>안녕하세요 세계<span class="ez-toc-section-end"></span></h1>

중첩된 요소

JSX의 구문은 HTML의 구문과 동일하며 둘 다 중첩 형식을 지원합니다. JSX는 자체 구성 요소를 만들고 구성 요소를 중첩 형식으로 변환할 수도 있습니다.

				
					<동물 목록> <개 /> <고양이 /> <새 /> </동물 목록>

복합 표현

JSX 자체도 JavaScript 구문을 기반으로 하기 때문에 앞에서 설명한 JavaScript 구문은 물론, 예시로 템플릿 리터럴(Template Literals)과 같은 ES6의 구문도 완벽하게 지원합니다.

				
					const 과일 = [&quot;사과&quot;,&quot;바나나&quot;,&quot;체리&quot;] const myElement = (
  <ul>
    <li>{과일[0]}</li>
    <li>{과일[1]}</li>
    <li>{과일[2]}</li>
	 <div>`나는 ${과일[0]}을 사랑합니다`</div>
  </ul>
);

JSX에서는 중괄호를 사용하여 JavaScript 변수를 래핑하거나 템플릿 리터럴(Template Literals) 구문을 사용하여 문자열을 JSX와 결합할 수 있습니다.

자바스크립트 지도

JavaScript 구문을 사용할 수 있으므로 Array에 내장된 맵 기능을 사용하여 JSX와 결합할 수도 있습니다.

				
					const 과일 = ["사과","바나나","체리"] const myElement = ( <ul> {fruits.map(element=>{ <li>{element}</li> })} </ul> ) ;

여러 개의 li를 지도 기능을 사용하여 결합할 수도 있습니다.

JSX를 사용하여 React 구성 요소 구성

마지막으로 초기 코드를 예로 들어 컴포넌트 구성 방법을 설명하겠습니다.

				
					import React from 'react-dom/client'; const myElement = ( <ul> <li>사과</li> <li>바나나</li> <li>체리</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root'));

첫 번째와 두 번째 줄은 이미 작성된 React 및 React-dom/client의 함수 라이브러리를 호출하고 내장된 함수를 사용하는 데 사용됩니다.

가운데의 const는 선언용으로 사용되며, 그 안에 JSX 구문을 넣을 수 있고, 그 안에 HTML을 작성할 수도 있다. 이것이 완료되면 myElement라는 요소를 얻을 수 있다.

마지막으로 ReactDOM의 createRoot 함수를 통해 먼저 "id="root""로 DOM을 생성하고 마지막으로 생성한 myElement 컴포넌트를 루트에 넣습니다.

위 과정을 거쳐 React 컴포넌트를 구성할 수 있습니다.

결론

이 기사에서는 매우 중요한 React 구문인 JSX에 대해 설명합니다. 또한 이 구문을 사용하여 React 구성 요소를 더 쉽게 만들 수 있습니다. 또한 JSX의 구성 요소를 만드는 원리, 구문 및 방법을 설명합니다.

제안사항이나 질문이 있으시면 메시지를 남겨주세요!

이 글이 마음에 드셨다면 더 많은 분들이 보실 수 있도록 좋아요와 공유 부탁드립니다~

인용하다

React Vernacular 운동 07-JSX

리액트 토속 스포츠 시리즈

React 작동 방식 – React Vernacular Movement 05

JavaScript 고차 함수 – React Vernacular Movement 04

JavaScript Async Await – React Vernacular Movement 03

JavaScript ES6 객체 – React Vernacular Movement 02

JavaScript ES6 – React Vernacular Movement 01

머리말