TIL(2020.12.09)

1.JSX基本文法
JSXとは何ですか.
反応を書くときに使う基本的な文法.HTMLと似ていますが、いくつかのルールがあります.
1.ラベルを閉じる必要があります.

htmlには、inputやbrのようにたまに閉じたり書いたりしないタグがありますが、応答では、同じタグを使用して閉じたタグを繰り返しないと、エラー(JSX contents.JSXコンテンツを閉じていない)

が発生します.

Self-Closing Tag htmlと同じ(ex.input,br)

2、2つ以上の要素は1つの要素で包まなければなりません.

//예
return (
<div> hello </div>
<div> Bye </div>
);
//must be wrapped error

return (
<div>
<div> Hello </div>
<div> Bye </div>
</div>
// Good!

しかし、要素を囲むために不要な追加要素を使用したくない場合は、

react v16.2から追加する分割機能を使えばよい.

要素を分割タグでラップすると、不要なdivはコードでクエリーされません.

で分割する前に、文書の上部に分割ファイル

をコンポーネントのようにインポートする必要がある.
3.JS値の使用
変数などのJavaScript値はJSX内部で使用できます.

変数を使用する場合は、jsのように呼び出し前の変数を宣言し、カッコ内で

を呼び出す必要があります.

//예
<div>hello {변수명>!</div>

jsのvar、const、let概念
4.条件付きレンダリング

条件表示画面構成

JSX内部で条件レンダリングを行う場合、通常は3つの演算子またはAND演算子

を使用します.

//삼항연산자를 사용한 예
import React, { component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2
            ? (<div>Yes</div>)
            : <<div>No..</div>)
        }
      </div>
    );
  }
  }
  
  export default App;

条件レンダリングを作成するには、

の3つの演算子を使用します.

三方向演算子を使用すると、trueとfalseでそれぞれ異なる結果が表示されます.

AND演算子にはtrueのみが表示され、falseの場合は何も表示されません.

//AND연산자 사용예
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>Yes!</div>)
        }
      </div>
    );
  }
  }
  
  export default App;

の大部分は以上の2つの演算子の使用によって解決されるが、複雑な条件を作成する必要がある場合は、JSX以外に論理を作成することが望ましい.

ですが、JSX内部で記述する必要がある場合はIIFE(インスタント実行関数)を使用します.

インスタント実行関数を使用する場合、if文を使用できます.

///IIFE 사용예
import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>one</div>);
            if (value === 2) return (<div>two</div>);
            if (value === 3) return (<div>three</div>);
          })()
        }
      </div>
    );
  }
}

export default App;

のIIFEはif文を使用しており、if文を矢印関数とともに使用すると、より簡単にコードを記述することができる.

///if문+화살표함수
(() => {
  if (value === 1) return (<div>one</div>);
  if (value === 2) return (<div>two</div>);
  if (value === 3) return (<div>three</div>);
})()

ドアの代わりにスイッチドアを使えばいいです.

語彙とその他の学習

var, const, let

レンダー

IIFE

矢印関数

スイッチドア