TIL 07

userrouterを使用する際の注意事項

router.Pushなどのユーザルータを導入して使用する方法では、すべての接続されたページで使用できますが、使用するページの位置が異なるために読み込まれた情報が変化するなどのエラーが発生する場合がありますので、注意して使用してください.

map/ filter

繰り返し文(forなど)を置き換える方法

//ex1
const classmates=[
  {name: '철수', age:12},
  {name: '영희', age:12},
  {name: '훈이', age:12},
  {name: '맹구', age:12}
]

const classmates2=[
  {name: '짱구', age:10, home:'서대문구'},
  {name: '철수', age:10,home:'동대문구'},
  {name: '유리', age:10, home:'중구'}
]

classmates.map((el)=> `${el.name} 어린이: ${el.age}세` )
classmates.map((el)=>({name: el.name, school:'다람쥐초등학교'}))

classmates2.map((el)=> `${el.name}어린이는 ${el.age}살이고, ${el.home}에 살고있습니다.`)

//ex2
const classmates=[
  {name: '철수', age:'13'},
  {name: '영희', age:'10'},
  {name: '훈이', age:'11'}
]

classmates.map((el)=>({name:el.name, age:el.age, school:'토끼초등학교'}))

上のコードでは、map後かっこのelはelements(要素)を表します.

classmates.map( (el) => (0) )

このように、"=>"の後にelではない他の要素が代入され、既存の要素ではなく新しい代入された要素が続く.
classmates.map(()=>()で同級生.map((el)=>el+")などで括弧を省略することもできます.これは矢印関数であるため、可能な論理です.
ただし、大かっこ{}を使用してオブジェクトを追加した場合、この部分の小かっこは省略できません.
部分の括弧を省略すると、括弧はオブジェクトではなく関数に変更されます.

filter

フィルタ機能

//ex1
ages.filter ( (el) => (el>=11) )

上のコードは11以上の要素のみを抽出するフィルタリング方法です.
.mapのようにオブジェクトに適用できます.フィルタと.同時にmapを適用することも可能である.

最新データへの更新

refetch

 const onClickDelete= (event) =>{
        deleteBoard({
            variables: {
                number: Number(event.target.id)
            },
            refetchQueries: [{query:FETCH_BOARDS}]
        })        
    }

削除などの情報が変更された場合、create、delete、updateなどのgqlの変異オプションを使用してrefetchをすべて適用できます.

keyとindex

鍵は?mapでロードされたデータで指定された値.
あるデータがあり、そのデータが削除されている場合、内部のどの値が変化しているかを知るためには、データ全体をチェックすることが基本ですが、キー値によって識別子が付与されている場合は、キー値に対応する情報を把握するだけで不要なプロセスを減らすことができます.そのため、効率を高めるためです.mapでロードしたデータにキー値を設定することをお勧めします.キー値はエラーを防ぐために一意の値を指定する必要があります.
ex)投稿番号、登録商品id等
indexは.mapが実行されている場合、index numberでこのセクションが何回目のデータであるかを示します.
indexも役に立ちますが、キー値は使いません.
これは、どのデータが発生してもindexは0から始まり、固定値で始まるため、データを削除するときに次のデータが既存のindex上に存在し、内部エラーを引き起こす可能性があるからです.
もちろんindexはkeyに設定できますが、APIに接続してDBから受信した情報であれば適用されません.