15日目/Shallow-Copy,Infinite-Sroll

14日間のコードレビュー

パスコンポーネント/pagination/01
異なるデザインのページングを使用したい場合に別々に使用
デザイナーと分かち合う物語の本
https://brunch.co.kr/@kmongdev/17

レプリケーション例外

let profile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교"
}


let profile2 = profile


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

全般的なレプリケーション

profile2.name = "영희"
'영희'
profile2
{name: '영희', age: 8, school: '다람쥐초등학교'}
profile
{name: '영희', age: 8, school: '다람쥐초등학교'}

Profile 2の名前が変更され、profileも変更されました.
コピーを交換したのに、オリジナルと一緒に交換する変な状況になった.

オブジェクト/配列のコピー:

String、Number、Booleanは値を格納しますが、オブジェクト/配列にはアドレスが含まれます.

ストレージは、ストレージを含むアドレスが予期せぬ構造です.


値段が貯まる場所は実は同じ場所です.
だからチョルスをヨンヒに変えたら、みんなで変えます.
カッコを使った瞬間にアドレスが作成されます.
カッコで新しいアドレスを作成します
厳密には、全体をコピーするのではなく、各値がゼロのアドレスを新規作成します.

let profile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교"
}


let profile2 = {
    name: profile.name,
    age:profile.age,
    school:profile.school
}


profile2.name = "영희"
'영희'
profile2
{name: '영희', age: 8, school: '다람쥐초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐초등학교'}

ただし、レプリケーションはコードを簡略化するために行われ、レプリケーションされるオブジェクトのコード量はより大きくなります.
そこで,これを補うためにspread演算子を用いた.

let profile3 = {...profile}


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

profile3.name = "훈이"
'훈이'
profile3
{name: '훈이', age: 8, school: '다람쥐초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐초등학교'}

かっこを使用しているので新しいアドレスが作成され、profile 3では万勲が使用されています.

let profile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교",
    hobby: {
        hobby1: "수영",
        hobby2: "게임"
    }
}


let profile2 = {
    ...profile
}


profile2
{name: '철수', age: 8, school: '다람쥐초등학교', hobby: {…}}age: 8hobby: {hobby1: '수영', hobby2: '게임'}name: "철수"school: "다람쥐초등학교"[[Prototype]]: Object
profile
{name: '철수', age: 8, school: '다람쥐초등학교', hobby: {…}}age: 8hobby: {hobby1: '수영', hobby2: '게임'}name: "철수"school: "다람쥐초등학교"[[Prototype]]: Object


profile2.hobby.hobby1 = "독서"
'독서'

profile2
{name: '철수', age: 8, school: '다람쥐초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임'}
name: "철수"
school: "다람쥐초등학교"

profile
{name: '철수', age: 8, school: '다람쥐초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임'}
name: "철수"
school: "다람쥐초등학교"

Profileをコピーしたい場合は、profile 2に他の趣味を適用しますが、読書にも適用されます.

これを浅いコピーと呼びます.

JSON.parse / JSON.stringify

オブジェクトを文字列に変換するコマンド.
文字列が含まれている場合は、文字列をオブジェクトとして作成します.



先ほど作成したオブジェクトとは全く異なるオブジェクトになるので、趣味では「水泳」を出力します.
=>>配列の複製も同様の方法です!

lodash

豊富な機能を備えたリポジトリ

lodash importではリファレンスバックグラウンドを使用するのが慣例です.

無限スクロール

通常はライブラリを使用して作成されます.
コメントもspread演算子に基づいています.
例えば、aaa、bbbの2つを組み合わせたい.
試してみるとconst ccc=[aaa値,bbb値]はダメです.
値段を一列に引き上げようとしたが、バケツに入った.
constccc=[aaaスキーム],[bbbスキーム]
そこでspread演算子を使ってみました.
constccc=[.aaa値,...bbb値]
中のものを出して羅列すると、一行につながっています.
この原理を使って作る部分は無限スクロールです
無限スクロールをコメントに適用します.
下にスクロールして10個の下部を取得
すでに10個、10個が並んでいる状態です.
スクロールすると、次の10個を配列として受け取ります.
[{},{},{}...][{},{},{}...]
この二つはどうやってつづりますか.
既存の(使用中のuseQuery)を電子化します.
次の受け取るものをスプレッドシートにして、一つ受ければいいです.
const以前のコメントたち=[コメント1.2.10]
const追加コメント=[コメント11,12...20]
=>スプレッドシート演算子の使用
const全体コメント=[...これらの前コメント...追加コメント]/[コメント1.20]
fetchMore:fetchを追加します.
より多くのクエリーが消えます.
飛んで行くときはどのページを取りますか?
FetchMoreでUpdateQueryを作成できます.
UpdateQueryが提供する役割は、バックエンドからインポートされた後に実行されます.
既存のクエリーが更新されます.
prev:以前のデータ(以前のuseQuery)
FetchMoreから受信した他の情報はFetchMoreResultに入力されました(11-20コメント)
prevには1~10のコメントがあります

欲しい部分だけスクロールする方法!