🐮 TIL 0128

🥛 [Shallow copy / Deep copy]

• When the user tries to copy something -- variables, arrays, objects, etc -- the original doesn't change but the copied changes.
• For arrays and objects, the placements are ㄴsaved in addresses, so if the user makes a change in copied one, the original one also changes.
• There must be a new area for copied array/object to be saved.
  --> So there we need JSON.stringify to make the array or object into string form. Then, with JSON.parse to make that string form into array/object form again.
• Basically, the copied string becomes a totally new object.

⬇️ Shallow Copy

• Can change the copy directly through re-declaring the value.
• Those three dots are the spread operator.
• Using spread operator, shallow copy is available.
  

⬇️ Deep Copy

• JSON.stringfy(child1) --> Literally stringfying child1 object.

• JSON.parse analyzes JSON string.

• Deep copy isn't really efficient so there comes out Lodash which makes JSON.parse in more efficient way. (ref Lodash -- deep clone)
  --> https://lodash.com/
  --> https://www.npmjs.com/package/lodash

• JSON.stringify() -->문자열 변경

• JSON.parse() --> 객체 변환

---

[Spread Operator Practice]

import {useState} from 'react'
import { gql, useMutation } from '@apollo/client'

const CREATE_BOARD = gql`
    mutation creatBoard(){
		'''
`

export default function BoardWrite(){

    const [inputs, setInputs] = useState({ writer: "", title: "", contents: "" })

    const [qqq] = useMutation(CREATE_BOARD)

    const zzz = async () => {
        const result = await qqq({ 
            variables: { 
                ...inputs} 
        })
    }

    const onChangeInputs= (event) => {
        setInputs({
            ...inputs,
            [event.target.id]: event.target.value
            //event.target.id ==> key로 들어감
        })
    }

    return (
        <div>
            <div>Spread Operator Practice</div>
            <input type="text" id="writer" onChange={onChangeInputs}/>
            <input type="text" id="title" onChange={onChangeInputs}/>
            <input type="text" id="contents" onChange={onChangeInputs}/>
        </div>
    )
}

---

🍦 [Infinite Scroller]

Used with library. (react-infinite-scroller)

Install
yarn add react-infinite-scroller

• hasMore = (true)
  --> Meaning, there are more data left to call.
• loadMore
  --> A function that is executed when the user scrolls down.
• https://www.npmjs.com/package/react-infinite-scroller

⬇️ Practice

import {gql, useQuery} from '@apollo/client'
import InfiniteScroll from 'react-infinite-scroller';


const FETCH_BOARDS = gql`
    query fetchBoards($page: Int){
        fetchBoards (page: $page){
            _id
            writer
            title
        }
    }
`

export default function PageNationPage(){
    const {data, fetchMore} = useQuery(FETCH_BOARDS,{ variables: {page : 1} })
    const onLoadMore = () => {
        if (!data) return;
        fetchMore({
            variables: { page: Math.ceil(data.fetchBoards.length / 10) + 1 },
            updateQuery: ( prev, {fetchMoreResult}) => {
                if(!fetchMoreResult.fetchBoards){
                    return { fetchBoard: [...prev.fetchBoards] } }
                return {
                    fetchBoards: [...prev.fetchBoards, ...fetchMoreResult.fetchBoards]
                }
            }
        })
    }

    return(
    <div>
        <InfiniteScroll
            pageStart={0}
            loadMore={onLoadMore} //스크롤 내릴시 실행되는 함수
            hasMore={true}>
            
        {data?.fetchBoards?.map((el) =>(  
                        <div key={el.id}>
                                <span>
                                    {el.title} {el.writer}
                                </span>
                    </div>
                    ))}
        </InfiniteScroll>
    </div>
    )
}

---

🍮 [Others]

• Double key --> The lastest key covers up the initial key that is declared precedingly.