Early Exit Patternは、各要素に条件付きレンダリングを追加し、Inputタグの読み取り専用プロパティ、ANTD、Material UI、npmライブラリを使用します.

Early Exit Pattern

これは,まず例外処理を行い,残りの部分を処理する方式である.
最初からミスの可能性を排除する.

const EarlyExitPattern = () => {
	if(에러가 날 수 있는 부분) {
      에러가 나면 실행할거 적어줌
    }
    나머지 실행
} 

各要素をレンダリングします。

リストというフォルダがあります.1つのフォルダに5つのファイルがあり、
一般的に勉強するとき、私はあなたに4つのファイルを作成させます.ここでは5つです.
ここでcontainer、presenter、styles、queiresファイルは同じです.
もう一つpresenterItemという
このファイルは、各要素をレンダリングするために作成されたファイルです.

各要素の条件付きレンダリングサイクル

説明する前に、構造を理解してみましょう.
containerからpresenterにコメント情報を送信します.
presenterはデータを受信し、リストにマッピングします.
各データはpresenterItemにel(各要素の情報)を渡します.
presenterItemでは、条件付きレンダリングに使用します.
今、よく見てみましょう.

コメントを受信したFETCH BOARD COMMENTS API
司会者に渡す.

presenterからpropsに渡されるデータ(fetchBoardComments)の値を使用します.
マップを撒く.ただし、ここにはスプレーマップだけでなく、各要素もあります.
分量が分かれています.このコンポーネントはpresenterItemです.
各配列要素(el)がpresenterItemに渡される.


presenterItemで
これはisEditが何であるかによって異なり、リストは現在のファイルにリストされています.
変更セクションには、他のフォルダで個別に作成されたコンポーネントが表示されます.
BoardCommentWriteコンポーネントを別のフォルダからインポートします.
書きました.
onClickUpdate(修正ボタン)をクリックすると、isEditはtrueになります.
これは、クリック時に修正ボタンを開くためです.
条件レンダリングを見ると
isEditでは、真面リストコンポーネントを表示できます.
isEditはfalseファセット修正素子を出力します

input tagのreadOnlyプロパティ

readOnlyプロパティは、ブール値を受け入れます.

true:読み取り専用

false:変更可能

ライブラリフレームワークの違い

ツール=ライブラリ、ツールバー=フレーム
反応.
構造が整っている.
だからフレームワークは正しいと思います.
reactはライブラリだと多くの人が言っています
最初はあまり機能していなかったのですが、今は大きくなっています.
人々は最初はライブラリと呼ばれていましたが、
現在はフレームワークと呼ばれています

antD , MaterialUI

MaterialUI : https://material-ui.com/

antD : https://ant.design/

antdへの書き込みに必要なコマンド

$ npm install --save @ant-design/icons

このコマンドを書いて、私が書きたいアイコンを複写すればいいです.

import { 쓰고싶은아이콘이름 } from "@ant-design/icons";

私が使いたいアイコンはこのようにインポートしなければ使えません.

ANTDをstyled componentに適用する

_app.jsファイルで

import "antd/dist/antd.css";

これは本当に幸せです.

import { GithubOutlined } from "@ant-design/icons";
import styled from "@emotion/styled";

const MyIcon = styled(GithubOutlined)`
  font-size: large;
  color: skyblue;
`;

export default function LibraryIconPage() {
  return (
    <div>
      <MyIcon />
    </div>
  );
}

このようにstyled componentを使うと役に立ちます.

npmサイトでのライブラリの使用

react-playerの使用

https://www.npmjs.com/package/react-player

$ yarn add react-player

react-playerを使用するには、このコマンドを実行します.
タイプスクリプトが競合する場合

$ yarn add -dev typescript

このコマンドを実行しましょう