第6週1日目

1.const{},const[]原理
Destructuring
2.type
Generic
3.ネットワーク編集
Web-Editor
4.支払API
lamport
5.地図連動
Map
1.Destructuring
2.オブジェクトからのデータの削除
3.HOC(Custom-Hooks)
4.refetch(Cache-Modify)

こうぞうぶんかいわりあて

オブジェクト

const child={
	name: "철수"
    age:13,
    school: "다람쥐초등학교"
}

という名前のオブジェクトがある場合は、値を入力します.

const name = child.name
const age = child.age
const school = child.school

歯const {name, age, school} = child交換して持ってきてもいいです.

整列

配列の様子から見ると.onst classmates = ["철수", "영희", "훈이"]配列名のときにこれらの値を割り当てるには

const child1 = classmates[0]
const child2 = classmates[1]
const child3 = classmates[2]

同じ考え構造分解によって配分されると、const [child1, child2, child3] = classmates.
useStateの場合

const[state, setState] = useState("")

const bbb = useState("")
bbb[0] = state
bbb[1] = setState

bbb[1](변경할값)でbbb[0]人state人を変更できます.
ただ使いにくいだけです.
しかし、ここには知っていることがあります.
通常useState()またはuseRecoilState()を使用する場合const [state] = useState()/useRecoilState() const [,setState] = useState()/useRecoilState()このようにしてstate部を空にすると、,が追加され、setStateが後に記載される.Global State人recoilによく使われるかもしれません.
これは配列の特性上、[setState]=useに,がなければ[,setState]となり、stateのようになってしまうので、空いているところに ,と書きます.

RESTパラメータ

オブジェクトの値を削除する場合は、元のオブジェクトに触れない方法を使用します.

const child = {
	name: "철수"
    age: 8,
    school: "다람쥐초등학교",
    money: 2000,
    hobby: "수영"

上記のオブジェクトがあると思う場合は、moneyとhobbyを削除します.const {money, hobby, ...rest} = childに示すように...restにはname, age, schoolが含まれています.

rest
>{name:'철수', age:8, school:'다람쥐초등학교'}

ここから所望の結果値としてrest.name, rest.age, rest.schoolを抽出することができる.
restは簡単な慣例ですが、以下のように個別の名前を変えてもいいです.

`const {money, hobby, ...deletedMoneyHobby} = child`

console.log(deletedMoneyHobby) // {name:'철수', age:8, school:'다람쥐초등학교'}

構造分解配分を適用し、消去したい[key, value]を分離し、残りを使用すればよい.

Custom Hooks

Hooks(useState, useQuery, useMutation, useRouter .....)は、反応に複数の機能を含む関数である.
Custom Hooksも同様に機能を含む関数ですが、Hooksとの違いは、私たち自身が作成した(Custom)Hooksです.
主にfunctionでuserState、userEffectなど他のhooksが既に使用されている場合に親関数が使用されます...名前をつけて使う.
useを追加しないと実現できないわけではありません.
しかし、これはHooksたちがプロジェクトの実行順序などの面で差異に微細な影響を及ぼす提案である.

// Custom Hooks를 사용할경우
// 안쪽에 Hooks 들이 있을 경우
function useAaa(){
	useState()
	useEffetc()
}

// 그냥 사용할 경우
// 안쪽에 Hooks 들이 없을 경우
function aaa(){
	bbb(ccc){
     return ccc
	}
}

refetch(Cache-Modify)

refetchは、主にクエリー時にデータの追加のインポートまたはリフレッシュを実行します.
ただし、規模の小さいサーバがデータを再要求するだけであれば、大きな問題はありません.
大規模なタスクがrefretchされると、サーバ上の負荷が増大します.
この負荷を軽減するには、キャッシュを変更して新しいファイルをロードする必要があります.このプロセスをキャッシュ-修正と呼びます.

const onClickSubmit = async () => {
    await createBoard({
      variables: {
        createBoardInput: {
          writer: "영희",
          password: "1234",
          title: "제목입니다~",
          contents: "내용입니다@@@",
        },
      },
    });
  };

こんな部分があったら試してみて、createBoardInput = :{writer, password, title, contents}上記の4つの新しいデータを含む変異を生成するもので、文章リストをインポートする場合は、refetchではなくrefetchをどのように使用すればいいのでしょうか.

const onClickSubmit = async () => {
    await createBoard({
      variables: {
        createBoardInput: {
          writer: "영희",
          password: "1234",
          title: "제목입니다~",
          contents: "내용입니다@@@",
        },
      },
      update(cache, { data }) {
        // data.createBoard
        cache.modify({
          fields: {
            fetchBoards: (prev) => {
              return [data.createBoard, ...prev]; // 10개(기존), 1개(새로추가한)
            },
          },
        });
      },
    });
  };

上記のように、既存のrefetchQueryの部分にupdate(cache, {data}){}を加えます.
入力{data}のcacheはupdateです.
次に、cache.modify({fields: {} })を追加してキャッシュの変更を求めます.
範囲は、fieldsによって決定される.
コードのfieldsはfetchBoards:であり、文書の情報を表示します.Queryは、既存のデータreturndata.createBoardである....prev(새로 추가된 mutation data)は「以前」を表していますが、更新前にcreateBoardで追加した文章が以前のデータになったのでそうなります.