๐Ÿฎ TIL 0128

j00b33ยท2022๋…„ 1์›” 28์ผ
0

CodeCamp FE 05

๋ชฉ๋ก ๋ณด๊ธฐ
14/33

๐Ÿฅ› [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

โฌ‡๏ธ 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.
profile
์ฝฑใ…†l

0๊ฐœ์˜ ๋Œ“๊ธ€