โฌ๏ธ Shallow Copy
โฌ๏ธ 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() --> ๊ฐ์ฒด ๋ณํ
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>
)
}
Used with library. (react-infinite-scroller)
Install
yarn add react-infinite-scroller
hasMore = (true)
loadMore
โฌ๏ธ 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>
)
}