[ map / filter ]

1️⃣ map

同じ論理を繰り返すmap

1）練習

アレイの適用

const classemates = ["철수", "영희", "훈이"]
classmates.map((el) => (el + "어린이"))
-> ["철수어린이", "영희어린이", "훈이어린이"]

オブジェクトの適用

const classmate = [
	{ name: "철수" }
    { name: "영희" }
    { name: "훈이" }
]
classmates.map( (el) => ({ name: `${el.name} 어린이` }) )
-> [{name: "철수 어린이"},
    {name: "영희 어린이"},
    {name: "훈이 어린이"}]

その他のアプリケーション

オブジェクトの追加

2）括弧は省略可能

:矢印関数のプロパティ

分かりやすい例

->かっこの欠落(修正が必要)

const add5 = () => { name: `${el.name} 어린이` }

                      -> 소괄호 생략하면 안된다  


const add5 = () => ( { name: `${el.name} 어린이` } )

3)htmlに接続

ジャージャー麺が入っています

filter

filter ifはゲートのようにデータをフィルタします.方式はmapと同じ

const age = [10, 13, 11]
age.filter( (el) => (el >= 11) )
// 11이 넘는 데이터만 가져와줘

-> [13, 11]

filter & map

filter age 11以上の価格mapその値に{school:[リス小学校]}の対象を加える

フルーツランキング3位を見たいだけです

あ~以前for複文の3番目の部分で中断してくれました
~今はfilterでフィルタリングしてmapで3位を繰り返す

[ refetchQuery ]

削除を確認するには削除とリフレッシュが必要です
すぐに確認できるrefetchQueryを作ってみましょう.
しかしすべてのMutationの後にReferenceQueryを使うわけではありません!Mutation後に変更されたデータを受信できない場合に使用

seMutation関数では、referenceQueryというキーが表示されます.Apolloが提供する基本機能.

const deleteBoard = async () => {
	try {
	const result = await deleteBoard({
		variables: {boardId: router.query.boardId,},
		refetchQueries: [{ query: FETCH_BOARDS,
				variables: { boardId: router.query.boardId }
                		}]
                        });
	} catch (error) {
	  console.log(error);
	}
};

配列でクエリーを開始し、クエリー内の変数を再設定すると、Mutationが正常に完了するとReferenceQueryが実行されます.

[ key ]

キーが存在する場合は、キー値のみを比較して、不要な比較やレンダリングを排除します.
このためkeyは、信頼性の高い一意性を提供するために、非繰返し値として指定する必要があります.(鍵が指定されていない場合はindexが自動的に鍵として使用されますが、これは良い方法ではなく、警告です.)
したがって、React公式ドキュメントでは、idをKey値として推奨します.
効果的に反応するためにmapを書くときは必ずid値を書きます
キーでLinkedIndexを入力できます
以下の3つの条件を満たすとよい.
1.静的データ.未計算で変更されていないデータ
2.マッピング中のすべてのデータにidがない
3.データが並べ替えられていないか、フィルタされていない.(そのままにし続ける)