React JSX – React 언어적 움직임 06

React06-React-JSX

머리말

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

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

這一篇則是會介紹一個React中重要的語法 – JSX。

JSX 也是目前我們比較常看到的 React 寫法 ,因此接下來會介紹

  1. JSX 是什麼?
  2. JSX 語法
  3. 使用 JSX 建構 React 元件

JSX 是什麼?

在講解 JSX 之前先來複習一下,前一篇所講解的,React 建立 DOM 語法

				
					const dish = 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 文件,那程式碼會更加的複雜且難以理解。

因此 Facebook 團隊在開發 React 的同時,也針對這一個缺點,新增了一種更簡潔的語法,用來建構前端網頁元件,那就是 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 語法進行講解。

className

在一般 HTML 的語法中,我們如果要對一個 tag 加上 class 會是用以下的寫法

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

然而在 JSX 的語法中,要針對一個 tag 加上任何的 class,則是要改為 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 也可以建立自己的元件,並且將元件變成巢狀的格式。

				
					<AnimalList>
	<Dog />
	<Cat />
	<Bird />
</AnimalList>
				
			

複合表達式

JSX 本身也是由 JavaScript 的語法,因此完全支援之前我們所講解的 JavaScript 語法,以及 ES6 中的語法,如果樣板字面值(Template Literals)來做舉例。

				
					const fruits = ["Apples","Bananas","Cherries"]

const myElement = (
  <ul>
    <li>{fruits[0]}</li>
    <li>{fruits[1]}</li>
    <li>{fruits[2]}</li>
	 <div>`I Love ${fruits[0]}`</div>
  </ul>
);

				
			

在 JSX 中可以用大括號把 JavaScript 的變數包進去,也可以使用樣板字面值(Template Literals)的語法將字串與 JSX 做結合。

JavaScript Map

既然可以使用 JavaScript 的語法,那我們也可以使用 Array 內建的 map 函數,來與 JSX 做結合。

				
					const fruits = ["Apples","Bananas","Cherries"]

const myElement = (
  <ul>
	{fruits.map(element=>{
		<li>{element}</li>
	})}
  </ul>
);

				
			

透過 map 函數的使用也可以將多個 li 組合起來。

使用 JSX 建構 React 元件

最後要講解如何建構元件的,用最一開始的程式碼來舉例。

				
					import React from 'react';
import ReactDOM from 'react-dom/client';

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

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

				
			

第一行以及第二行用來呼叫 react 以及 react-dom/client 已經寫好的函式庫,並且使用內建的函式。

中間的 const 用來做宣告,並且裡面可以放置 JSX 的語法,其中可以寫一些 HTML,當這些完成之後就可以獲得一個名為 myElement 的元件。

最後透過 ReactDOM 裡面的 createRoot 函數,先建立一個 「id=”root”」的 DOM,最後再將自己建立的 myElement 元件放入至 root 中。

經過上面的流程,就可以建構出一個 React 元件(component)了。

결론

這一篇講解了一個很重要的 React 語法 – JSX,也是透過這樣的語法來讓我們更容易建立一個 React 元件。也另外講解了 JSX 的原理、語法以及如何建立一個元件。

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

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

인용하다

React白話文運動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

React06-React-JSX
React06-React-JSX

코멘트를 남겨주세요

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

ko_KR한국어