reactを使用するときに私が犯した間違いです.

私が知らない、理解していない部分と既存の定理を総合して整理しました.

React

1.親コンポーネントからデータを出力し、子コンポーネントにする必要があります。

->データストリームはTOP-DOWN形式です.同じステータス値を使用するには、異なる構成部品の共通の親に値を追加する必要があります.クラスエレメントでメソッドを定義し、サブエレメントとしてpropsを使用して降格し、サブエレメントでステータス値を関数に保存し、親エレメントでサブエクスプレッションの値を使用できます.

2.反応を作製する際には、各素子を組み合わせた形で順次作製する。

->反応器はBOTTOM-UP形式で作られています.

3.クラス名を適用するときにclassNameを使用します。

->既存のjs構文では、class="クラス名"は、リアクターがclassNameを使用しています.

React LifeCycle

(出典:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
素子にとって最も重要な時刻は
------作成---------
作成時
画面に表示(mount)
->> componentDidMount
------更新------
新しいアイテムを受け取った時
新しい状態にあるとき
新しい状態になってから
->> componentDidUpdate
---------削除----------------
画面が消える前に(アンインストール)
->> componentWillUnmount
各重要な時点で、構成部品はライフサイクルに基づいて再レンダリングされます.コンストラクション関数またはプレゼンテーションでは非同期(async await)の使用は許可されていないため、ライフサイクルを使用して非同期を作成します.

JSX

1.JSX文法を導入した理由は何ですか。どんなメリットがありますか。

->宣言型のメリットは直感です.JavaScriptコードでUI関連の操作を行う場合、視覚的に役立つ

2.JSXを使用せずにreactを使用できるか

->JSXを使用せずにreactを使用することもできます.しかし直感が足りないので良いとは言えません.

3.JSXは1つの要素で包む必要があります。

->パッケージを並べて実行することもできます>>高次関数を書くか、より便利に見えるようにします.

4.JavaScriptコードを適用する場合は、{}に記述してください。

->にはJavaScript式のみが含まれます.>>式=変数に格納できる内容(文が使用できない場合は3つの演算子を使用する必要があります).

const tweet = <Tweet writer="김코딩">
  {
    if (nowLearning) {
      return '리액트'
    } else {
      return '피파'
    }
  }는 늘 짜릿하네요
</Tweet>

const tweet = <Tweet writer="김코딩">
  {nowLearing ? '리액트' : '피파'  }는 늘 짜릿하네요
</Tweet>

三項演算子をうまく使えば面白いので積極的に使いたいと思います

5.初めてDOMを学習したときにページ単位で操作する場合と比較して、コンポーネント単位で開発するメリットは何ですか?

->最初は、ファイルごとに構成部品を作成して保存すれば良いと聞いていたので、「なぜ複数のファイルを作成して構成部品を作成しなければならないのですか?」しかし,反応器を用いてコードを記述する際には,この点に気づいた.ファイルごとに構成部品を作成した場合は、構成部品を1つずつ表示し、他のアイテムに再使用できます.要するに,回収性と直感性が利点であると考えられる.

6.1つの要素から複数の要素を返す方法

->クリップを使用します.あるエレメントから別のエレメントの別名を読み込む場合は、jsxプロパティのため、1つの別名がdivに囲まれます.この場合fragmentを使用すると、カバーdivを持たずに別名を返すことができます.使用方法は、divを読み込む構成部品に置き換えます.Fragmentに入ればいい(出典:https://ko.reactjs.org/docs/fragments.html)

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

props vs state

1. props

->外部から渡される値(入力値、固定値)

2.「マイ・ツイッター」という名前のエレメントを使用する方法があるとします。エレメント内で「マイ・ツイッター」という文字列にどのようにアクセスしますか?

-> props.childrenを検索すると「私の新しいツイッター」の値が得られます.

3.propsを使用する場合、厳格なルールを遵守する必要があります。何ですか。

->すべてのreaction素子は、自分のpropsを処理するときに、純粋な関数のように動作する必要があります.純関数とは,入力値を変えずに常に同じ入力値に対して同じ結果を返すことである.
純関数:入力が同じ場合、出力は同じです.(出力に影響するのはすべて入力です.)付随作用はありません.入力値(No side-effects)が同じ場合、出力値は同じである必要があります.条件によって価格を変えることはできません.付随作用とは,関数において値を変えなくても付随変数を変えることができないことを意味する.たとえば、変数に影響のないcount値をcount++すると、1回目の実行時と2回目の実行時では値は固定されますが、内部count値が変化するため、負の役割を果たします.
反応器ではpropsは親素子から子素子への値であり、子素子では変更できない.サブエレメントを関数内部と呼び、親を外部と呼ぶと、サブエレメントはpropsを変更できないため、純粋な関数の性質を持っていると言えます.>>構成部品の動作を予測するための設定.(出典:https://velog.io/@algoorgoal/%EC%88%9C%EC%88%98%ED%95%A8%EC%88%98%EC%97%90%EC%84%9C-react-component%EB%A5%BC-%EA%B1%B0%EC%B3%90-hook%EA%B9%8C%EC%A7%80)

state

->内部で変化する値、生活の中で変化する値、構成部品の使用中に構成部品の内部で変化する値.
stateを持つ構成部品を作成するには、クラスとして作成する必要があります.
ライフサイクルの問題のため、stateは直接割り当ておよび変更できません(push、unshiftは禁止されています).concat、slice、spread構文を使用する必要があります.
再レンダリングするにはsetStateで値を更新する必要があるため、直接割り当てまたは変更してもレンダリングされません.実際にpushを使用して値を更新しようとすると、pushを使用して値を追加できますが、Renderにはなりません.

それ以外は

Webパッケージ:html、css、jsなどの複数のファイルを1～2つのファイルに組み合わせて静的に保存します。

->jsファイルの重複機能を持つファイル間にモジュールを形成し、ソースコードの規模を低減し、再利用性を向上させる.

バーベル:jsxをjsに変換する役割を果たします。