React - JSX

反応の基礎概念
まず、React公式ページの一番上のJSXについて知りましょう.

JSXって何?

Javascriptの拡張構文

したがってブラウザはJSXを直接読み取ることができず、コンパイルが必要である.

compileは、reactエイリアスを生成するJavaScriptオブジェクトの式です.

では、JSXが実際にどのように使われているかをコードで見てみましょう.

const h1 = <h1>Hello World<h1>;

その後、上記のコードをコンパイルすると、htmlドキュメントで使用されている<h1>Hello World!</h1>と同じ結果が得られます.

JSXを利用する際に知りたいこと

HTMLタグが提供する属性は同じです.

  const h1 = <h1 id="header-1">Hello World</h1>;

  // 단, class는 className을 사용한다
  // JS에도 Class의 개념이 있기 때문에
  const div = <div className="div-1">Hello World</div>;

を重ねることはできますが、1行を超えると括弧で囲みます.さらに、すべてのJSX

を囲むために最も外側のJSXが必要です.

  const header = (
    <div>
      <h1>Header</h1>
    </div>
  );

  // 에러 발생
  const divs = (
    <div></div>
    <div></div>
  )

clostingtagは存在する必要があります.

    // HTML의 경우 <br> 도 <br/>과 같은 결과를 내놓지만 JSX는 아니다
    const img = <img />;
    const br = <br />;

{}|JavaScript式を適用できます.

    const name = 'John';
    const title = <h1>{name}</h1>

    // 또한 속성에도 적용이 가능하다.
    const url = './image.png';
    const img = <img src={url} />;

HTMLはイベントアプリケーションと同様、onClickなどのパッケージではなくonClickを使用します

    function handleClick () {
    	return true;
    }

    const div = <div onClick={handleClick}>div</div>;

if,for文のJavaScriptでの式は文であるため,{}でも使用できない.同じ結果式を使用します.

  // if문 대신 사용하는 방법
  const flag = true;
  let msg;
  
  // 1. JSX밖에서 사용한다
  if(flag) {
    msg = <h1>it's true</h1>;	
  } else {
    msg = <h1>it's false</h1>;
  }

  // 2. 3항 연산자를 사용한다.
  const h1 = (
    <h1>
      { flag ? "it's true" : "it's false" }
    </h1>
  );

  // 3. && 연산자를 사용한다.
  const showHeader;
  const header = (
	<div>
  	// showHeader가 true라면 <h1>show me</h1>가 render되지만
    	//false라면 안된다.
  		{showHeader && <h1>show me</h1>}
	</div>
  );
  // 3번은 1, 2번과 다르게 render가 될지 안될지를 결정할 때
  // 사용한다.

// for 대신 사용이 가능한 방법
// array.map을 이용한다        
const list = [1, 2, 3, 4];

const liList = list.map((val) => {
  return <li>{val}</li>;
});

const lis = (
  <ul>
    {liList}
  </ul>
);

実はreactの勉強を始めたばかりの頃はJSXが式だったのですが、{}ではif文とfor文がJavaScriptの式ではないことに気づかなかったので使えなかったのですが、「そうでしょう」だと思います.
したがって,式をより正確に理解した.

式と文

JavaScriptには、式と文の2つの概念があります.

式記述生成値のコード

文は、動作を制御するコードを記述する.

簡単な例で区別しましょう.

// expression
const x = 10;
const y = getNum(some_number);

// statement
if () {
	// some code
} else { 
	// some code
}

while () {
	// some code
}

for () {
	// some code
}
// if, while, for문을 통해서 값을 만들어 낼 순 있지만 그 결과값을 반환하진 않는다.

const x=10検索式と文;contx=は文で、10です.この式には追加の学習が必要です.

React.createElement()

実はJSXを使う必要はありません.ReactライブラリのcreateElement()メソッドを使用すると、同様の効果が得られます.

const el = React.createElement(
	"h1",
	{className: 'hello'},
	"Hello, World!!"
);

const h1 = <h1 className="hello">Hello, World!!</h1>;
// 실제로 해보면 진짜로 같은 결과가 나온다.

しかし、JSXを使用すると、UIがどのように構成されているかが容易に判断され、使用しない理由はありません.

次の授業は?

Reactがパフォーマンス向上に大きな役割を果たしている仮想DOMとDOMについて知りたい.