15日目

オブジェクト/配列のコピー(...Spread演算子)

あるオブジェクトを別のオブジェクトに割り当てると、既存のオブジェクトの値を変更すると、割り当てられた他のオブジェクトの値も変化します.
他の割り当てられたオブジェクトの値が変更されないようにするにはどうすればいいですか?

const profile = {
	name: '철수',
    age: 8,
    school: '다람쥐 초등학교'
    }
 
 const friendProfile = {
 	name: profile.name,
    age: profile.age,
    school: profile.school
 }

こうすればいいただし,オブジェクトのキーが増加し,キーと値が増加すると,いちいち割り当てることが困難になるため,他の方法を用いなければならない.

const friendProfile = {...profile}

spread演算子^0^ただし、浅いコピーではオブジェクトのオブジェクトをコピーできません!
オブジェクト内のオブジェクトをインポートする必要がある場合は、JSON.stringify(object)が完了した後にJSON.parse(object)操作^0^

無限スクロール

昨日ホームページの命名法を学びました.今日は別の投稿をロードする方法を学びました:無限スクロール.
無限スクロール機能を使用するにはreact無限スクロールを使用します.使い方が簡単です.まずはターミナルで.yarn add react-infinite-scrollerreact無限scrollerを受け入れる
そして次のコードを使いたい素子を適用するpresenterが終わりました!

<InfiniteScroll
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader" key={0}>Loading ...</div>}
>
    {items} // <-- This is the content you want to load
</InfiniteScroll>

loadMoreセクションには、ロードするデータを取得する関数が追加されています.これで終わると、簡単ですが、Containerは何かを設定する必要があります.

// data, fetchMore 불러오기
  const { data, fetchMore } = useQuery(FETCH_BOARDS);

// loadMore 함수
  const onLoadMore = () => {
    if (!data) return;

    fetchMore({
      // 다음페이지 불러오기
      variables: { page: Math.ceil(data?.fetchBoards.length / 10) + 1 },

      // 현재 불러온 데이터에 다음 데이터 추가해주기
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult?.fetchBoards)
          return {
            fetchBoards: [...prev.fetchBoards],
          };
        return {
          fetchBoards: [...prev.fetchBoards, ...fetchMoreResult.fetchBoards],
        };
      },
    });
  };

これを適用すると、スクロール下部がウィンドウスクロールの最低点である場合、他のデータがロードされ、現在のデータの下に貼り付けられます.
ウィンドウのスクロールではなく、コンポーネントのスクロールを表示する場合は、次のコードを適用します.

<div style="height:700px;overflow:auto;">
    <InfiniteScroll
        pageStart={0}
        loadMore={loadFunc}
        hasMore={true || false}
        loader={<div className="loader" key={0}>Loading ...</div>}
        useWindow={false}
    >
        {items}
    </InfiniteScroll>
</div>