【React(초보자)】JSX의 장점을 겨우 이해할 수 있었다.

2주 정도 전부터 React의 공부를 시작했습니다만, 개발 언어에 관해서는 지금은 「TypeScript를 사용하는 것이 당연하다」라는 것・・・.
그래서 한번 확실히 공부하려고 생각하고 서바이벌 TypeScript를 어제 읽기 시작했습니다.
읽어 나가는 사이에, 드디어 JSX라고 하는 것의 메리트를 이해할 수 있게 되었습니다(집필자의 여러분, 감사합니다.).

· 서바이벌 TypeScript

전제

우선 프로그래밍의 기법에는 명령형과 선언형이 있습니다.
카레를 만들기 위해,,,

・명령형
프로그래밍하는 동안 데이터에 명령을 내리는 쓰기.
요점은 잘 선언할 필요가 있다.
(이미지)
카레 가루는 1 조각 사용하십시오.
고기는 100g 사용하십시오.
당근은 0.5 개 사용하십시오.
감자는 이하 약)

・선언형
프로그램에서 대상의 성격을 선언하여 목적을 달성하는 글.
(이미지)
카레를 만드세요.
fin

참고
· 선언적? Declarative? 무슨 일이야? - 오사키 히로유키
・명령형 프로그래밍 - G학원 프로그래밍 용어 해설
・선언형 프로그래밍 - G학원 프로그래밍 용어 해설

이점은 무엇입니까?

아래 목록을 출력하고 싶습니다.



HTML로 쓰면 이렇게 됩니다.
(JS Fiddle 등의 온라인 에디터로 출력되는지 확인해 보세요.)
JS Fiddle

HTML

<ul>
  <li>リンゴ</li>
  <li>オレンジ</li>
  <li>ぶどう</li>
</ul>

하지만 React는 자바스크립트 라이브러리이므로, 만약 위의 리스트를 출력하고 싶은 경우, 본래라면 아래와 같이 써야 합니다. 일단 이렇게 써야 하는 것은 힘들다.

HTML

<div id="addList">リスト要素を上に追加</div>

자바스크립트

const list = document.createElement("ul");  // ul要素を生成
const apple = document.createElement("li"); // li要素を生成
apple.innerText = "リンゴ"; // li要素に"リンゴ"というテキストを追加
list.append(apple); // list要素にappleというli要素を追加
const orange = document.createElement("li");
orange.innerText = "オレンジ";
list.append(orange);
const grape = document.createElement("li");
grape.innerText = "ぶどう";
list.append(grape);

const currentDiv = document.getElementById("addList"); // idが"addList"という要素を取得
document.body.insertBefore(list, currentDiv); // "addList"の直前に"list"というul要素を追加

그러나 JSX라는 React에서 채용되고 있는 언어에서는 아래와 같이 선언적인 쓰는 방법이 가능합니다(요점은 편하게 쓸 수 있다). 이것이 JSX의 장점입니다.

JSX

function Fruits() {
  return (
    <ul>
      <li>リンゴ</li>
      <li>オレンジ</li>
      <li>ぶどう</li>
    </ul>
  );
}

참고
· React로 좋아하는 버튼을 만들자.

요약

A. JSX는 JavaScript의 확장 언어입니다.
JavaScript Syntax Extension, 또는 JavaScript XML의 약자로, JavaScript 안에서 HTML/XML을 걸도록(듯이) 한 것입니다.
요점은
본래는 자바스크립트에서 자바스크립트를 작성하는 방법으로 써야 한다.
→JavaScript 안에서 XML/HTML을 쓸 수 있도록 한 언어
라는 것입니다.
※위의 예로 「XML 나오지 않았을까」라고 생각하는 분도 계신다고 생각합니다만, 공식 문서라고 아래와 같이 XML이 쓰여져 있었습니다. 실제로 React를 공부하고 있고, XML을 쓴 적이 없기 때문에, 이 근처 어떻게 사용되고 있는지는 앞으로 공부해 나가면 좋겠습니다.
바리 바리 사용하고 있었던 땀
스스로 컴퍼넌트를 작성해, 그것을 출력하는 경우군요.

JSX

App.tsx
import React from 'react';
import './App.css';
​
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <LikeButton />   {/* 関数コンポーネントを出力 */}
      </header>
    </div>
  );
}
​
function LikeButton() { // 関数コンポーネントを作成
  return <span>いいねボタン予定地</span>;
}
​
export default App;

출처
· React로 좋아하는 버튼을 만들자.

참고
JSX
Draft: JSX Specification

HTML, JavaScript 및 DOM 요소라는 개념에 대한 이해가 얕아서 위의 내용을 이해하는 데 시간이 걸린 것 같습니다. 이 근처는 아직도 학습이 필요하다고 통감했습니다.
이상, 간단하게 JSX의 장점 정리였습니다.
(이해가 잘못되어 있는 점이 있으면 지적해 주세요.)